/* Tweets archive · self hosted watch pages
   Mobile first: base styles target small phones (320px+); min-width queries add layout. */

/* ── Tweets ── */
.tweets-hero { padding-bottom: var(--s-6); }
.tweets-hero .watermark { inset-inline-start: -2vw; inset-inline-end: auto; bottom: -.2em; }
.tweets-hero .eyebrow .idx { display: inline-flex; }
.tweets-hero .stats { margin-top: var(--s-6); border-top-color: var(--line-night); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tweets-hero .stat { border-inline-start-color: var(--line-night); min-inline-size: 0; }
.tweets-hero .stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
.tweets-hero .stat:nth-child(n+3) { border-top: 1px solid var(--line-night); }
.tweets-hero .stat .v { font-size: clamp(2.6rem, 11vw, 4.25rem); overflow-wrap: anywhere; }

.tw-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.tw-search { display: flex; align-items: center; gap: var(--s-3); padding-inline: 1.1em; min-block-size: 50px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: border-color var(--d-2), box-shadow var(--d-2); }
.tw-search:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px var(--sky-20); }
.tw-search .icon { color: var(--sky-deep); }
.tw-search input { flex: 1; min-inline-size: 0; border: 0; background: none; font-family: var(--f-ui); font-size: 1rem; /* 16px: no iOS zoom */ min-block-size: 46px; }
.tw-search input:focus { outline: none; }
.tw-search input::-webkit-search-cancel-button { cursor: pointer; }

/* year chips scroll sideways on phones, wrap on wider screens */
.tw-filters { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; scroll-snap-type: x proximity; }
.tw-filters::-webkit-scrollbar { display: none; }
.tw-sort { justify-self: start; display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); }
.tw-sort button, .tw-chip { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-block-size: 40px; font-family: var(--f-ui); font-size: .9rem; font-weight: 500; border-radius: var(--r-pill); white-space: nowrap; transition: background var(--d-2), color var(--d-2), border-color var(--d-2); }
.tw-sort button { padding: .45em 1em; color: var(--ink-60); }
.tw-sort button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tw-sort button[aria-pressed="true"] .icon { color: var(--sky); }
.tw-chip { flex: none; scroll-snap-align: start; padding: .4em 1.05em; border: 1px solid var(--line-2); color: var(--ink-80); font-variant-numeric: tabular-nums; }
.tw-chip[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.tw-count { margin: var(--s-4) 0 var(--s-5); font-size: var(--t-sm); }
.tw-count span { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.tw-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-5); align-items: start; }
.tw-card { break-inside: avoid; margin-bottom: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); }
.tw-top { display: flex; align-items: center; justify-content: space-between; }
.tw-top time { font-size: var(--t-xs); color: var(--on-night-3); font-variant-numeric: tabular-nums; }
.tw-card .q-text { font-size: 1.06rem; }
.tw-card .q-foot { flex-wrap: wrap; }
.tw-actions { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.tw-act { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--on-night-2); border: 1px solid transparent; transition: background var(--d-2), color var(--d-2), border-color var(--d-2); }
.tw-act:active { background: var(--sky); color: var(--ink); }
.tw-card[hidden] { display: none !important; }

@media (pointer: coarse) {
  .tw-sort button, .tw-chip { min-block-size: 44px; }
}
@media (hover: hover) {
  .tw-chip:hover { border-color: var(--sky); }
  .tw-act:hover { background: var(--sky); color: var(--ink); }
}
@media (min-width: 640px) {
  
  .tw-card { padding: var(--s-6) var(--s-6) var(--s-5); margin-bottom: var(--s-5); }
  .tw-act { inline-size: 38px; block-size: 38px; }
}
@media (min-width: 761px) {
  .tweets-hero .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tweets-hero .stat:nth-child(n) { border-top: 0; border-inline-start: 1px solid var(--line-night); padding-inline-start: var(--s-4); }
  .tweets-hero .stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .tweets-hero .stat .v { font-size: clamp(3rem, 5vw, 4.25rem); }
  .tw-toolbar { grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--s-4); position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in oklab, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .tw-filters { grid-column: 1 / -1; order: 3; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tw-sort { justify-self: end; }
}
@media (min-width: 1100px) {  }

/* ── Watch list ── */
.watch-hero { padding-bottom: var(--s-7); }
.watch-hero .watermark { inset-inline-start: -2vw; inset-inline-end: auto; }
.watch-hero .eyebrow .idx { display: inline-flex; }
.watch-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.watch-facts { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.watch-facts li { display: flex; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-family: var(--f-ui); color: var(--ink-60); line-height: 1.7; font-size: .95rem; }
.watch-facts strong { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
.wf-icon { flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--sky); }
.watch-count { margin-bottom: var(--s-5); align-items: center; }
.watch-count .ui { display: inline-flex; align-items: center; gap: .4em; font-size: var(--t-sm); }
.watch-card .card-title { font-size: 1.12rem; }
.wc-series { display: inline-flex; align-items: center; gap: .4em; font-size: var(--t-xs); }
.wc-series .icon { color: var(--sky-deep); }
.wc-cta { display: inline-flex; align-items: center; gap: .4em; font-weight: 500; color: var(--sky-deep); font-size: var(--t-sm); }
.wc-cta .icon { transition: transform var(--d-2) var(--ease-out); }
.watch-card .outline-num { font-size: 2rem; }
@media (hover: hover) { .watch-card:hover .wc-cta .icon { transform: translateX(-4px); } }
@media (min-width: 861px) { .watch-hero-grid { grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); } }

/* ── Player page ── */
.player-stage { padding-block: var(--s-5) var(--s-8); }
.player-stage .crumbs { margin-bottom: var(--s-4); }
.player-stage .crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 22ch; }
.player-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
/* phones: the video runs edge to edge */
.player-frame { position: relative; overflow: hidden; background: #000; aspect-ratio: 16 / 9; margin-inline: calc(-1 * var(--gutter)); border-block: 1px solid var(--line-night); }
.player-frame video { inline-size: 100%; block-size: 100%; background: #000; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-4); border-bottom: 1px solid var(--line-night); }
.speed { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 8px; border-radius: var(--r-pill); background: var(--night-2); border: 1px solid var(--line-night); color: var(--on-night-2); max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.speed .icon { color: var(--sky); margin-inline: 6px 2px; flex: none; }
.speed button { flex: none; min-inline-size: 44px; min-block-size: 40px; font-size: .84rem; padding: .4em .6em; border-radius: var(--r-pill); color: var(--on-night-2); font-family: var(--f-ui); transition: background var(--d-2), color var(--d-2); }
.speed button[aria-pressed="true"] { background: var(--sky); color: var(--ink); font-weight: 600; }
.player-info { padding-top: var(--s-5); display: grid; gap: var(--s-3); }
.player-info .h2 { font-size: clamp(2.4rem, 9vw, 3.8rem); line-height: .9; margin-top: var(--s-2); }
.player-info .eyebrow .idx { display: inline-flex; }
.player-info .row .btn { flex: 1 1 auto; }
.kbd-hint { display: none; font-size: var(--t-xs); color: var(--on-night-3); margin: var(--s-4) 0 0; }
.page-watch-video kbd { font-family: var(--f-ui); font-size: .8rem; padding: .1em .45em; border: 1px solid var(--line-night); border-radius: 4px; color: var(--on-night-2); }

.playlist { background: var(--night-2); border: 1px solid var(--line-night); border-radius: var(--r-3); overflow: hidden; }
.playlist-title { display: flex; align-items: center; gap: .5em; padding: var(--s-4); font-size: .95rem; font-weight: 500; border-bottom: 1px solid var(--line-night); color: var(--on-night); }
.playlist-title .icon { color: var(--sky); }
.playlist-title .num { margin-inline-start: auto; font-size: var(--t-xs); color: var(--on-night-3); }
.playlist-items { list-style: none; padding: var(--s-2); }
.pl-item { display: flex; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-2); transition: background var(--d-2); }
.pl-item:active { background: var(--night-3); }
.pl-item[aria-current] { background: color-mix(in oklab, var(--sky) 18%, var(--night)); }
.pl-thumb { position: relative; flex: none; inline-size: 112px; aspect-ratio: 16 / 9; border-radius: var(--r-1); overflow: hidden; background: var(--night-3); }
.pl-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pl-now { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--night) 55%, transparent); color: var(--sky); }
.pl-text { display: grid; gap: 2px; align-content: start; min-inline-size: 0; }
.pl-text small { font-family: var(--f-ui); font-size: .75rem; color: var(--on-night-3); }
.pl-text strong { font-family: var(--f-read); font-weight: 600; font-size: .92rem; line-height: 1.55; color: var(--on-night); }

@media (hover: hover) {
  .pl-item:hover { background: var(--night-3); }
  .kbd-hint { display: block; }
}
@media (min-width: 640px) {
  .player-frame { margin-inline: 0; border-radius: var(--r-3); border: 1px solid var(--line-night); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); }
  .player-info .row .btn { flex: 0 0 auto; }
}
@media (min-width: 981px) {
  .player-stage { padding-top: var(--s-6); }
  .player-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .playlist { position: sticky; top: calc(var(--header-h) + 16px); }
  .playlist-items { max-block-size: min(70vh, 640px); overflow: auto; scrollbar-width: thin; }
  .pl-thumb { inline-size: 120px; }
}

/* opened from search: /tweets#t-<id> */
.tw-card.is-target { outline: 2px solid var(--sky); outline-offset: 4px; }
.tw-card[id] { scroll-margin-top: 96px; }
@media (hover: hover) { :lang(en) .watch-card:hover .wc-cta .icon { transform: translateX(4px); } }