/* Shared by all styles. Uses only the variables every style defines: --bg --fg --muted --border --link. */

/* `.entry { display: block }` would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.more { margin: 1.5rem 0; color: var(--muted); font-size: 0.9em; }

/* ---- filter bar (revealed by app.js) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}
.filter-bar .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 2em; overflow: hidden; }
.filter-bar .seg button {
  font: inherit; background: transparent; color: var(--muted); border: 0; padding: 0.3em 0.9em; cursor: pointer;
}
.filter-bar .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); font-weight: 600; }
.filter-bar select {
  font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--border);
  border-radius: 2em; padding: 0.3em 0.9em; min-width: 0;
}
.filter-bar .pill-btn {
  font: inherit; color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: 2em; padding: 0.3em 0.9em; cursor: pointer;
}
.filter-bar .pill-btn:hover, .filter-bar .seg button:hover { color: var(--link); border-color: var(--link); }
.filter-count { color: var(--muted); margin-left: auto; }
.filter-empty { color: var(--muted); }

/* ---- follow star ---- */
.follow-btn {
  font: inherit; font-size: 1.05em; line-height: 1; background: none; border: 0; padding: 0 0.15em;
  cursor: pointer; color: var(--muted); vertical-align: baseline;
}
.follow-btn:hover { color: #d4a017; }
.follow-btn[aria-pressed="true"] { color: #d4a017; }
h1 .follow-btn { font-size: 0.8em; }

/* ---- shared-list banner ---- */
.share-banner {
  margin: 0 0 1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--link); border-radius: 8px;
  font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center;
}
.share-banner button {
  font: inherit; color: var(--link); background: transparent; border: 1px solid var(--link);
  border-radius: 2em; padding: 0.15em 0.8em; cursor: pointer;
}

/* ---- tags ---- */
.tag {
  display: inline-block; font-size: 0.78em; color: var(--muted); border: 1px solid var(--border);
  border-radius: 2em; padding: 0.05em 0.7em;
}
.tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.85rem; margin: 0 0 1rem; }
.tag-feeds { margin: 2rem 0 1rem; }
.tag-feeds h2 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.tag-group { flex-basis: 100%; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; opacity: 0.75; }
.tag-item { display: inline-flex; align-items: center; gap: 0.25em; }
.tag-feed { text-decoration: none; }

/* ---- archive ---- */
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; margin: 0 0 0.75rem; }
.pager .page-back { margin: 0; }
.period-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.period-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.period-list .count { margin-left: auto; color: var(--muted); font-size: 0.85em; }
.section-title.day { margin-top: 1.5rem; }
.row-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.row-list .row {
  display: grid; grid-template-columns: 3.2em minmax(6em, 14em) 1fr auto; gap: 0.5rem; align-items: baseline;
  padding: 0.3rem 0; border-top: 1px solid var(--border); font-size: 0.9em;
}
.row-list .row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.row-list .row .row-text { color: var(--muted); overflow-wrap: anywhere; }
.row-list .row .site-name { color: inherit; font-weight: 600; text-decoration: none; }
.row-list .row .row-link { font-size: 0.85em; }
@media (max-width: 560px) {
  .row-list .row { grid-template-columns: 3.2em 1fr; }
  .row-list .row .row-text, .row-list .row .row-link { grid-column: 2; }
}

/* ---- About page ---- */
.prose h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.prose p, .prose li, .prose dd { line-height: 1.85; }
.prose .diagram { margin: 1rem 0; text-align: center; }
.prose .diagram img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; }
.prose .diagram figcaption { color: var(--muted); font-size: 0.85em; margin-top: 0.5rem; }
.legend { display: grid; grid-template-columns: minmax(8em, 12em) 1fr; gap: 0.5rem 1rem; margin: 0; }
.legend dt { font-weight: 600; }
.legend dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .legend { grid-template-columns: 1fr; gap: 0.1rem; } .legend dd { margin-bottom: 0.6rem; } }

/* ---- legal / privacy ---- */
.legal { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 2.5rem 0 1.5rem; }
.legal a { color: inherit; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9em; margin: 0.5rem 0 1rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.45rem 0.65rem; text-align: left; vertical-align: top; }
.prose th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.toggle-box { border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1rem 0; }
.toggle-box button { font: inherit; cursor: pointer; border: 1px solid var(--link); color: var(--link); background: transparent; border-radius: 2em; padding: 0.25em 1em; }

/* ---- PWA ---- */
.install-btn { font: inherit; font-size: inherit; color: var(--link); background: transparent; border: 1px solid var(--border); border-radius: 2em; padding: 0.1em 0.8em; cursor: pointer; }
.install-btn:hover { border-color: var(--link); }

/* ---- full-text search (injected by app.js at the top of <main>) ---- */
.gsearch { margin: 0 0 1rem; font-size: 0.9rem; }
.gsearch > input[type="search"] {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--fg); background: transparent;
  border: 1px solid var(--border); border-radius: 2em; padding: 0.45em 1em;
}
.gsearch-results { margin-top: 0.6rem; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: 0.6em; max-height: 70vh; overflow-y: auto; }
.gsearch-site { display: block; padding: 0.25em 0; font-weight: 600; }
.gsearch-count, .gsearch-empty { margin: 0.4em 0; color: var(--muted); font-size: 0.85em; }
.gsearch-hit { padding: 0.5em 0; border-top: 1px solid var(--border); }
.gsearch-head { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; align-items: baseline; }
.gsearch-text { margin: 0.25em 0 0; line-height: 1.5; }
.gsearch-row { display: flex; gap: 0.5rem; align-items: stretch; }
.gsearch-row > input[type="search"] { flex: 1; min-width: 0; }
.gsearch-save, .gsearch-chip button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--border); border-radius: 0.6em; padding: 0.3em 0.8em; }
.gsearch-save:hover, .gsearch-chip button:hover { border-color: var(--muted); }
.gsearch-kw { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.gsearch-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.gsearch-chip button { border: 0; border-radius: 0; padding: 0.2em 0.7em; }
.gsearch-chip-x { color: var(--muted); padding-left: 0.4em !important; padding-right: 0.6em !important; }
.gsearch-badge, .gsearch-new { background: #dc2626; color: #fff; font-size: 0.75em; font-weight: 700; border-radius: 999px; padding: 0 0.5em; line-height: 1.6; }
.gsearch-badge { margin-right: 0.2em; }
.pwa-unlock { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  max-width: calc(100vw - 2rem); padding: 0.6rem 0.8rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 0.6em;
  background: var(--bg, Canvas); color: inherit; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.pwa-unlock input { font: inherit; padding: 0.25em 0.5em; min-width: 9rem; }
.pwa-unlock button { font: inherit; cursor: pointer; padding: 0.25em 0.7em; }
.pwa-unlock-msg { flex-basis: 100%; color: var(--muted); }
.gsearch mark { background: rgba(255, 213, 0, 0.45); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---- full-width layout: use the whole browser width; cards flow into as many columns as fit ---- */
main { max-width: none; width: 100%; padding-inline: clamp(16px, 3vw, 56px); }
#content { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
#content > :not(.entry) { grid-column: 1 / -1; }   /* headings, row lists, notes span all columns */
#content > .entry { margin: 0; min-width: 0; }
.style-minimal #content { gap: 0 3rem; }          /* minimal: borderless entries separated by rules only */
.gsearch, .site-footer { max-width: 60rem; }  /* .prose (About, guide, privacy) has no cap: it uses the full width */
.site-footer { margin-inline: 0; }

/* dashboard: the "latest update" card holds a full date and time, so its value is set smaller */
.stat-value--time { font-size: 1.1rem; line-height: 1.5; }

/* ---- visual timeline on a site's history page (SVG drawn by app.js; never stored) ---- */
.gtl { margin: 0 0 1.5rem; }
.gtl .gtl-note { margin: 0 0 0.5rem; font-size: 0.85em; }
.gtl-body { overflow-x: auto; }
.gtl svg { display: block; }
.gtl-line { stroke: var(--border); stroke-width: 2; fill: none; }
.gtl-wedge { fill: var(--link); stroke: var(--link); stroke-width: 1; }
.gtl-hash { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--link); text-anchor: middle; }
.gtl-day { font: 9px system-ui, sans-serif; fill: var(--muted); text-anchor: middle; }
.gtl-node { cursor: pointer; }
.gtl-node:hover .gtl-wedge { fill: #d1242f; stroke: #d1242f; }
.gtl-node:hover .gtl-hash { fill: #d1242f; text-decoration: underline; }
.gtl-initial .gtl-wedge { fill: var(--muted); stroke: var(--muted); }
.gtl-initial .gtl-hash { fill: var(--muted); }
.entry { scroll-margin-top: 1rem; }
.entry.gtl-flash { outline: 2px solid var(--link); outline-offset: 3px; }

.gtl-more { font: inherit; font-size: 0.85rem; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 2em; padding: 0.2em 0.9em; cursor: pointer; margin: 0 0 0.5rem; }
.gtl-more:hover { color: var(--link); border-color: var(--link); }

/* timeline by week: one row per week, x = time within the week (app.js) */
.gtl-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.gtl-week { font: 600 11px system-ui, sans-serif; fill: var(--fg); }
.gtl-dayname { font: 9px system-ui, sans-serif; fill: var(--muted); }
.gtl-stem { stroke: var(--border); stroke-width: 1; }
.gtl-gap { font: 11px system-ui, sans-serif; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; }
.gtl-gap-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.gtl-hash, .gtl-day { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }

/* ---- update card: line 1 = the site, line 2 = when the update was detected ---- */
.entry h2 { font-size: 1.1rem; line-height: 1.4; margin: 0 0 0.15rem; }
.entry .entry-time { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.85em; }
.entry .entry-time time { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.entry .entry-commit { margin-top: 0.15rem; }
.entry .summary-title { margin: 0.75rem 0 0; font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.entry .summary-title + .summary { margin-top: 0.2rem; }
.entry .summary-model { margin: 0.2rem 0 0; font-size: 0.78em; color: var(--muted); text-align: right; }
/* minimal: its h2 used to be a small grey italic date line; it is now the site name and must stand out */
.style-minimal .entry h2 { font-style: normal; font-weight: 600; color: var(--fg); font-size: 1.15rem; }
.style-minimal .entry .entry-time { font-size: 0.8em; }