/* :root block dropped: theme.css owns the token superset. */
#sec-yelp *{margin:0;padding:0;box-sizing:border-box}
#sec-yelp body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
#sec-yelp a{color:var(--accent);text-decoration:none}#sec-yelp a:hover{text-decoration:underline}

/* .header / .tabs rules removed: page header + top tab bar replaced by the shared nav rail. */

#sec-yelp .content{padding:0}

/* Status strip */
#sec-yelp .strip{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
#sec-yelp .pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:13px;flex:1;min-width:140px}
#sec-yelp .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
#sec-yelp .d-g{background:var(--green)}
#sec-yelp .d-r{background:var(--red)}
#sec-yelp .d-y{background:var(--yellow)}
#sec-yelp .d-x{background:var(--text-faint)}
#sec-yelp .d-p{animation:yelp-pulse 1.4s ease-in-out infinite}
@keyframes yelp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
#sec-yelp .pill .l{color:var(--muted)}#sec-yelp .pill .v{font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}

/* Grid & cards */
#sec-yelp .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-bottom:20px}
#sec-yelp .card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px 20px}
#sec-yelp .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#sec-yelp .card-t{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
#sec-yelp .badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}
#sec-yelp .b-ok{background:var(--success-tint);color:var(--green)}
#sec-yelp .b-err{background:var(--danger-tint);color:var(--red)}
#sec-yelp .b-warn{background:var(--warn-tint);color:var(--yellow)}
#sec-yelp .b-info{background:var(--accent-tint);color:var(--accent)}

#sec-yelp .m{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
#sec-yelp .m:last-child{border-bottom:none}
#sec-yelp .ml{color:var(--muted)}#sec-yelp .mv{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
#sec-yelp .green{color:var(--green)}#sec-yelp .red{color:var(--red)}#sec-yelp .yellow{color:var(--yellow)}

/* Action bar */
#sec-yelp .abar{display:flex;align-items:center;gap:10px;margin-bottom:20px}
#sec-yelp .btn{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 16px;font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:6px}
#sec-yelp .btn:hover{border-color:var(--accent);color:var(--accent)}
#sec-yelp .btn:disabled{opacity:.35;cursor:not-allowed}
#sec-yelp .btn-a{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
#sec-yelp .btn-a:hover{opacity:.85;color:var(--bg)}
#sec-yelp .timer{font-size:12px;color:var(--muted);margin-left:auto}

/* Live feed */
#sec-yelp .feed{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
#sec-yelp .feed-hdr{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
#sec-yelp .feed-hdr .card-t{margin:0}
#sec-yelp .feed-body{max-height:600px;overflow-y:auto;scroll-behavior:smooth}
/* Live Feed fills the viewport: the RECENT ACTIVITY card grows to consume the
   height left below the status strip, leaving a 20px gap at the bottom, and its
   body scrolls internally instead of stopping at the 600px cap above (which left
   a big empty band on tall screens). #v-live is a flex column anchored to the
   viewport (44px = the content's 24px top padding + the 20px bottom gap); the
   strip keeps its natural height (it may wrap), the feed flex-grows, and the
   feed-body shrinks-to-fit with its own scroll (min-height:0 lets it shrink). */
#sec-yelp #v-live{display:flex;flex-direction:column;height:calc(100vh - 44px)}
#sec-yelp #v-live .feed{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#sec-yelp #v-live .feed-body{flex:1 1 auto;min-height:0;max-height:none}
/* Recent-activity is a real columnar table now (matches the other data tables).
   The shared .table / .table-dense component (components.css) supplies the warm
   header band, row borders, and hover; these add the status icon + cell tones. */
#sec-yelp .feed-table{width:100%}
/* The page-level `#sec-yelp *{padding:0}` reset (specificity 1,0,0) outranks the
   shared .table td padding, which is what squished the rows. Restore comfortable
   row height with an #sec-yelp-scoped rule that wins the cascade. */
#sec-yelp .feed-table th{padding:11px 16px}
#sec-yelp .feed-table td{padding:11px 16px}
#sec-yelp .feed-table .feed-status-col{width:44px}
/* Status icon column stays compact: the 16px row padding would push it past its
   44px intent, so tighten its horizontal padding around the 22px icon. */
#sec-yelp .feed-table td.feed-status,#sec-yelp .feed-table th.feed-status-col{padding-left:8px;padding-right:8px}
#sec-yelp .feed-table td.feed-status{text-align:center}
#sec-yelp .feed-icon{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1}
#sec-yelp .fi-found{background:var(--success-tint);color:var(--green)}
#sec-yelp .fi-miss{background:var(--danger-tint);color:var(--red)}
#sec-yelp .fi-pend{background:var(--warn-tint);color:var(--yellow)}
#sec-yelp .feed-table td.feed-email{font-family:'SF Mono','Fira Code',monospace;font-size:12px;color:var(--text-muted);white-space:nowrap}
#sec-yelp .feed-table .name{font-weight:600}
#sec-yelp .feed-muted{color:var(--muted)}
/* Last hit is the trailing metadata column: right-align it and give it a clear
   left gap so it never reads as jammed against the right-aligned Friends count. */
#sec-yelp .feed-table td.feed-time,#sec-yelp .feed-table th.feed-time-col{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;padding-left:32px}
/* Keep the two right-side numeric columns from collapsing into each other. */
#sec-yelp .feed-table th.num,#sec-yelp .feed-table td.num{padding-left:24px}
#sec-yelp .feed-empty{padding:40px;text-align:center;color:var(--muted);font-size:14px}
/* Show More (#3): centered affordance at the bottom of the loaded rows. */
#sec-yelp .feed-more{padding:14px 16px;text-align:center;border-top:1px solid var(--border)}
#sec-yelp .feed-more-btn:disabled{opacity:.5;cursor:default}

/* Activity chart card (#4) at the top of Live Feed. Fixed height; the feed below
   flex-grows. Mirrors the Sentiment chart card's warm surface + uppercase label. */
#sec-yelp .feed-chart{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin-bottom:20px;flex-shrink:0}
#sec-yelp .feed-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
#sec-yelp .feed-chart-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
#sec-yelp .feed-chart-sub{text-transform:none;letter-spacing:normal;font-weight:400;font-size:10px;color:var(--text-faint);margin-left:4px}
#sec-yelp .feed-chart-latest{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
#sec-yelp .feed-chart-latest b{color:var(--text);font-weight:600}
#sec-yelp .feed-chart-latest .sep{margin:0 8px;color:var(--border-strong)}
#sec-yelp .feed-chart-body{position:relative;height:200px}
#sec-yelp .feed-chart-body canvas{width:100%!important}
#sec-yelp .chart-empty{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--muted);font-size:13px;padding:0 16px}
/* Range toggle (#4): reuse the house .segmented/.segment control (components.css,
   shown in styleguide.html). The page-level `#sec-yelp *{padding:0}` reset
   (specificity 1,0,0) zeroes the shared component's padding, so restore it with
   #sec-yelp-scoped rules that win the cascade — height/radius/background/active
   pill all survive the reset and come from components.css. */
#sec-yelp .feed-chart-controls{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#sec-yelp .feed-chart .segmented{padding:3px}
#sec-yelp .feed-chart .segment{padding:0 10px;display:inline-flex;align-items:center}
#sec-yelp .feed-chart .segment:disabled{opacity:.5;cursor:not-allowed}
/* Honest-history caption + idle/zero note under the chart. */
#sec-yelp .feed-chart-note{margin-top:8px;font-size:11px;color:var(--text-faint);min-height:14px;line-height:1.4}
/* Subtle busy state on range switch: keep the prior chart visible, just dim it. */
#sec-yelp .feed-chart-body.is-loading canvas{opacity:.55;transition:opacity var(--dur) var(--ease)}

/* Not-installed banner */
#sec-yelp .banner{background:var(--warn-tint);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin-bottom:20px;font-size:13px;color:var(--yellow)}
#sec-yelp .banner code{background:var(--accent-tint);color:var(--accent);padding:1px 6px;border-radius:4px;font-size:12px}

/* Log viewer */
#sec-yelp pre.logbox{background:var(--surface-sunken);border:1px solid var(--border);border-radius:6px;padding:14px;font-family:'SF Mono','Fira Code',monospace;font-size:11.5px;line-height:1.6;overflow-x:auto;height:calc(100vh - 220px);color:var(--text-muted);white-space:pre-wrap;word-break:break-all}

/* Skeleton */
#sec-yelp .sk{background:linear-gradient(90deg,var(--border) 25%,var(--surface-hover) 50%,var(--border) 75%);background-size:200% 100%;animation:yelp-shim 1.5s infinite;border-radius:4px;height:16px;margin:6px 0}
@keyframes yelp-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Recommendations */
#sec-yelp .rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
#sec-yelp .rec-item{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:14px}
#sec-yelp .rec-item code{display:inline-block;background:var(--accent-tint);color:var(--accent);padding:1px 6px;border-radius:4px;font-size:12px;font-weight:600;margin-bottom:6px}
#sec-yelp .rec-item p{font-size:12px;color:var(--muted);line-height:1.5}

#sec-yelp .wide{grid-column:1/-1}
#sec-yelp .hidden{display:none!important}
@media(max-width:768px){#sec-yelp .strip{flex-direction:column}#sec-yelp .grid{grid-template-columns:1fr}}