/* The surface (2026-10-29): slots that widgets load into. */
.surface{display:flex;flex-direction:column;gap:1.25rem;padding:1rem 0 2rem}
.sf-slot{border:1.5px dotted color-mix(in srgb, var(--muted-foreground) 35%, transparent);border-radius:var(--radius-xl);background:transparent;padding:.35rem .75rem .75rem}
.sf-label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.04em;text-transform:lowercase;color:var(--muted-foreground);opacity:.7;padding:.35rem .1rem .2rem}
.sf-label::before{content:"";width:.45rem;height:.45rem;border-radius:var(--radius-round);border:1.5px dotted var(--primary)}
.sf-label a{color:inherit;text-decoration:none}
.sf-label a:hover{color:var(--primary)}
.sf-body #feed{padding:.25rem 0 0}
.sf-err{font-family:var(--font-mono);font-size:var(--text-small);color:var(--muted-foreground)}
.sf-welcome{padding:.5rem .1rem .25rem}
.sf-welcome p{margin:0 0 .9rem;font-size:var(--text-lead)}
.sf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.sf-btn{border:0;border-radius:var(--radius-pill);padding:.6rem 1.1rem;font:inherit;cursor:pointer}
.sf-link{color:var(--primary)}
/* bare widgets: subway sections drawn by front.js; only our own buttons are styled here (2026-10-29) */
.surface:has(.sf-bare){gap:0;padding-top:0}
.sf-word{display:inline-block;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);background:none;border:0;border-bottom:1px solid var(--primary);border-radius:0;padding:0 0 .1rem;margin-top:.5rem;cursor:pointer;text-decoration:none}
.sf-word:disabled{opacity:.5;cursor:default}
.sf-alts{display:flex;gap:1rem}
.sf-legal{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground);margin:.5rem 0 0}
.sf-legal a{color:inherit}
.sf-bad{color:#c2410c}
.sf-bad:empty{display:none}
/* Cards: one story per card, thumbed sideways; small, few words (2026-10-30) */
.sf-deck{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:1rem 0 .5rem;margin:0;scrollbar-width:none}
.sf-deck::-webkit-scrollbar{display:none}
.sf-card{flex:0 0 72%;max-width:22rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;min-height:12.5rem;padding:.85rem .9rem .8rem;border:1px solid var(--border);border-radius:3px;background:var(--card,#fff)}
.sf-pick{border-color:var(--primary);box-shadow:inset 0 3px 0 var(--primary)}
.sf-top{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;min-height:1.1rem}
.sf-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .4rem;border-radius:2px;color:#fff}
.sf-claude{background:var(--primary)}
.sf-hot{background:#d9480f}
.sf-trending{background:#e8a317;color:#3d2a00}
.sf-when{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted-foreground)}
.sf-card h2{margin:0;font-size:1.02rem;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sf-why{margin:.45rem 0 0;font-size:.85rem;line-height:1.35;color:var(--primary)}
.sf-kw{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.sf-kw span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-foreground);border:1px solid var(--border);padding:.1rem .35rem;border-radius:2px}
.sf-foot{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-top:auto;padding-top:.7rem;font-family:var(--font-mono);font-size:10.5px;color:var(--muted-foreground)}
.sf-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sf-foot .sf-word{margin-top:0;flex:none}
.sf-wait h2{color:var(--muted-foreground);font-weight:400}
.sf-countrow{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.2rem 0 0}
.sf-count{margin:0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--muted-foreground)}
.sf-refresh{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--border);border-radius:var(--radius-round,50%);background:var(--card,#fff);color:var(--muted-foreground);cursor:pointer;padding:0}
.sf-refresh svg{width:14px;height:14px}
.sf-refresh:disabled{cursor:default}
.sf-refresh.sf-busy svg{animation:sf-spin 1s linear infinite}
@keyframes sf-spin{to{transform:rotate(360deg)}}
/* Cards as Obsidian callouts (2026-10-30): a tinted box, a coloured title line with the callout's icon */
.sf-callout{--c:8,109,221;border:0;border-radius:4px;background:rgba(var(--c),.1);box-shadow:none}
.sf-callout[data-callout="fire"]{--c:233,49,71}
.sf-callout[data-callout="alert"]{--c:236,117,0}
.sf-callout[data-callout="note"]{--c:120,120,128}
.sf-ctitle{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;font-weight:600;font-size:.88rem;color:rgb(var(--c))}
.sf-ctitle svg{width:16px;height:16px;flex:none}
.sf-ctitle .sf-when{font-weight:400}
.sf-callout .sf-why{color:rgb(var(--c))}
.sf-callout .sf-kw span{border-color:rgba(var(--c),.3);background:rgba(255,255,255,.55)}