:root {
  --bg: #fbfaf8; --card: #fff; --ink: #1a1a19; --dim: #6b6a65; --line: #e3e1db;
  --accent: #0f6e56; --accent-bg: #e1f5ee; --warn: #993c1d; --warn-bg: #faece7;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1a19; --card:#232322; --ink:#eeece6; --dim:#9b9a94; --line:#383835;
          --accent:#5dcaa5; --accent-bg:#12332a; --warn:#f0997b; --warn-bg:#3a1d12; }
}
* { box-sizing: border-box; }
/* The hidden attribute is only `display:none` in the UA stylesheet, so ANY author rule
   setting display on the same element beats it — .controls{display:flex} left the feed
   controls on screen while el.hidden read true. Make hidden actually hide. */
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
button, input, select { font: inherit; }

/* A control has to acknowledge a press before anything else happens. Without these,
   clicking Save felt like clicking a picture of a button. */
button { transition:background-color .14s, border-color .14s, color .14s, opacity .14s; }
button:not(:disabled):active { transform:translateY(0.5px); }
button:disabled { opacity:.6; cursor:default; }
button[data-pending] { cursor:progress; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  * { transition-duration:0ms !important; animation-duration:0ms !important; }
  .scroller { scroll-behavior:auto; }
}
/* Inline icons inherit the text colour and sit on the text baseline. */
.ic { width:15px; height:15px; flex-shrink:0; }
.mono { font-family:var(--mono); font-size:13px; }
.dim { color:var(--dim); }
body.modal-open { overflow:hidden; }

header { position:sticky; top:0; z-index:20; background:var(--bg);
         border-bottom:1px solid var(--line); }
.bar { display:flex; gap:14px; align-items:center; padding:12px 20px;
       max-width:1180px; margin:0 auto; }
.wordmark { background:none; border:none; color:var(--ink); font-weight:700;
            font-size:17px; letter-spacing:-0.02em; cursor:pointer; padding:0; }
#searchform { flex:1; display:flex; gap:8px; max-width:620px; }
#q { flex:1; padding:9px 14px; border:1px solid var(--line); border-radius:999px;
     background:var(--card); color:var(--ink); }
#q:focus { outline:2px solid var(--accent); outline-offset:-1px; }
#searchform button { padding:9px 18px; border-radius:999px; border:1px solid var(--line);
                     background:var(--card); color:var(--ink); cursor:pointer; }
.ghost { background:none; border:1px solid var(--line); color:var(--ink);
         padding:8px 14px; border-radius:999px; cursor:pointer; }
.ghost:hover { border-color:var(--accent); color:var(--accent); }
.ghost.sm { padding:4px 11px; font-size:12.5px; }

.notice { display:flex; gap:14px; align-items:center; justify-content:space-between;
          background:var(--warn-bg); color:var(--warn); border-top:1px solid var(--line);
          padding:10px 20px; font-size:13px; }
.notice b { font-weight:650; }

main { max-width:1180px; margin:0 auto; padding:24px 20px 80px; }

.wordmark { text-decoration:none; }
.nav { display:flex; gap:4px; }
.nav a { font-size:13.5px; color:var(--dim); text-decoration:none; padding:6px 11px;
         border-radius:999px; white-space:nowrap; }
.nav a:hover { color:var(--ink); }
.nav a.on { background:var(--accent-bg); color:var(--accent); font-weight:600; }

.lhead { display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.lhead h1 { font-size:21px; margin:0; letter-spacing:-0.01em; }
.lsub { color:var(--dim); font-size:13.5px; }
.spacer { flex:1; }
.controls { display:flex; gap:10px; align-items:center; }
.ctl { font-size:13px; color:var(--dim); display:flex; gap:6px; align-items:center; }
.ctl select { background:var(--card); color:var(--ink); border:1px solid var(--line);
              border-radius:7px; padding:5px 8px; }

.cbanner { position:relative; border-radius:12px; overflow:hidden; margin-bottom:18px;
           background:var(--line); aspect-ratio:6/1; }
.cbanner img { width:100%; height:100%; object-fit:cover; display:block; }
.chead { display:flex; align-items:center; gap:16px; padding:0 2px 18px; }
.avatar { width:78px; height:78px; border-radius:50%; object-fit:cover;
          border:3px solid var(--bg); background:var(--line); flex-shrink:0; }
.cnames { flex:1; min-width:0; }
.cnames h1 { font-size:23px; margin:0 0 3px; letter-spacing:-0.015em; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tabs button { background:none; border:none; border-bottom:2px solid transparent;
               color:var(--dim); font-size:14px; padding:9px 14px; cursor:pointer;
               margin-bottom:-1px; }
.tabs button:hover { color:var(--ink); }
.tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent);
                                     font-weight:600; }

.cbar { display:flex; gap:10px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.cbar input { flex:0 1 280px; padding:8px 13px; border:1px solid var(--line);
              border-radius:999px; background:var(--card); color:var(--ink); }
.cbar input:focus { outline:2px solid var(--accent); outline-offset:-1px; }

.seg-ctl { display:inline-flex; border:1px solid var(--line); border-radius:999px;
           overflow:hidden; }
.segb { background:none; border:none; color:var(--dim); font-size:13px; padding:6px 15px;
        cursor:pointer; }
.segb[aria-pressed="true"] { background:var(--accent-bg); color:var(--accent); font-weight:600; }
.segb:hover { color:var(--ink); }

/* Grouped-by-channel view: one row per channel, videos scroll sideways. */
.chanrow { margin-bottom:30px; }
.chanrow-head { display:flex; align-items:center; gap:13px; margin-bottom:13px; }
.chanrow-head img { width:52px; height:52px; border-radius:50%; object-fit:cover;
                    background:var(--line); flex-shrink:0; }
.chanrow-head a { color:var(--ink); text-decoration:none; font-size:17px; font-weight:650;
                  letter-spacing:-0.01em; }
.chanrow-head a:hover { color:var(--accent); }
.chanrow-head .n { font-size:12.5px; color:var(--dim); }
/* Horizontal carousel: no visible scrollbar, arrows on either side move it along. */
.rail { position:relative; }
.scroller { display:flex; gap:15px; overflow-x:auto; scroll-behavior:smooth;
            scrollbar-width:none; -ms-overflow-style:none; padding:2px 0; }
.scroller::-webkit-scrollbar { display:none; }
.scroller .card { flex:0 0 234px; }
.arrow { position:absolute; top:66px; width:38px; height:38px; border-radius:50%;
         border:1px solid var(--line); background:var(--surface, var(--card));
         color:var(--ink); cursor:pointer; display:flex; align-items:center;
         justify-content:center; z-index:3; padding:0; }
.arrow:hover { border-color:var(--accent); color:var(--accent); }
.arrow.left { left:-14px; }
.arrow.right { right:-14px; }
.chev { width:9px; height:9px; border-right:1.6px solid currentColor;
        border-bottom:1.6px solid currentColor; }
.arrow.right .chev { transform:rotate(-45deg); margin-left:-3px; }
.arrow.left .chev { transform:rotate(135deg); margin-right:-3px; }

.subbtn { border:1px solid var(--accent); background:var(--accent); color:var(--bg);
          font-weight:600; font-size:13px; padding:6px 15px; border-radius:999px; cursor:pointer; }
.subbtn[aria-pressed="true"] { background:none; color:var(--dim); border-color:var(--line);
                               font-weight:400; }
.subbtn:hover { opacity:.9; }

.srow { display:grid; grid-template-columns:44px 1fr auto; gap:13px; align-items:center;
        padding:11px 0; border-bottom:1px solid var(--line); }
.srow img { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--line); }
.srow a { color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; }
.srow a:hover { color:var(--accent); }
.srow .f { font-size:12px; color:var(--dim); }

/* Channel name inside a card is its own link — you should be able to reach a channel
   without opening one of its videos first. */
.card .c a { color:var(--dim); text-decoration:none; }
.card .c a:hover { color:var(--accent); text-decoration:underline; }

.emptybox { text-align:center; padding:70px 20px; }
.emptybox h2 { font-size:20px; margin:0 0 10px; }
.emptybox p { color:var(--dim); max-width:52ch; margin:0 auto; }
.chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.chip { background:var(--card); border:1px solid var(--line); color:var(--ink);
        padding:6px 14px; border-radius:999px; cursor:pointer; font-size:13px; }
.chip:hover { border-color:var(--accent); color:var(--accent); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px 16px; }
.card { cursor:pointer; border:none; background:none; padding:0; text-align:left; color:inherit; }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px;
            background:var(--line); display:block; }
.card h3 { font-size:14px; margin:9px 0 3px; line-height:1.35; font-weight:600;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .c { font-size:12.5px; color:var(--dim); }
.card:hover h3 { color:var(--accent); }
.card .when { font-size:12px; color:var(--dim); }

/* Cap the player by viewport height so the whole thing fits on a laptop without
   scrolling. Constraining max-width (not max-height) keeps 16:9 intact. */
.player-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:11px;
               overflow:hidden; margin:0 auto 16px;
               max-width:min(100%, calc((100vh - 305px) * 16 / 9)); }
.player-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#watch h1 { font-size:20px; margin:0 0 8px; letter-spacing:-0.01em; }
.meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap;
        color:var(--dim); font-size:13.5px; margin-bottom:14px; }
.chan { color:var(--ink); font-weight:600; }
.pill { border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:12px; }

.votes { display:flex; gap:22px; align-items:center; flex-wrap:wrap;
         padding:13px 16px; background:var(--card); border:1px solid var(--line);
         border-radius:10px; margin-bottom:14px; }
.vote { display:flex; gap:7px; align-items:center; font-size:15px; }

.src { font-size:11.5px; color:var(--dim); }

.sponsors { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.seg { font-size:12px; padding:4px 11px; border-radius:999px;
       background:var(--accent-bg); color:var(--accent); font-family:var(--mono); }
.seg.none { background:none; border:1px dashed var(--line); color:var(--dim); }

.prefs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px;
         padding:11px 14px; border:1px solid var(--line); border-radius:10px;
         background:var(--card); }
.prefs .lab { font-size:12.5px; color:var(--dim); margin-right:2px; }
.tog { font-size:12px; padding:4px 12px; border-radius:999px; cursor:pointer;
       border:1px solid var(--line); background:none; color:var(--dim); }
.tog[aria-pressed="true"] { background:var(--accent-bg); border-color:var(--accent);
                            color:var(--accent); font-weight:600; }
.tog:hover { border-color:var(--accent); }
.prefs .why { font-size:11.5px; color:var(--dim); flex-basis:100%; margin-top:2px; }
.desc { color:var(--dim); font-size:13.5px; white-space:pre-wrap; max-width:75ch;
        border-top:1px solid var(--line); padding-top:16px; }
/* Clamped to four lines until asked. Descriptions used to arrive truncated to a snippet; now
   that the full one comes through they can run to thousands of characters and would push the
   comments off the page. line-clamp rather than a max-height so it never cuts a line in half. */
.desc.clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
              overflow:hidden; }
.desc-more { margin-top:10px; }

.flash { position:fixed; left:50%; transform:translateX(-50%); top:96px; z-index:40;
         background:var(--accent); color:var(--bg); padding:9px 18px; border-radius:999px;
         font-size:13.5px; font-weight:600; }

#receipt { position:fixed; right:0; top:0; bottom:0; width:352px; z-index:30;
           background:var(--card); border-left:1px solid var(--line);
           padding:20px; overflow-y:auto; }
.r-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.r-head h2 { font-size:15px; margin:0; }
/* The month picker is the panel's heading, so it is sized like one and carries no box
   until you go near it — a bordered control up here would compete with the amount below.
   The caret is drawn in rather than left to the platform, which renders its own in light
   chrome and reads as a hole in a dark panel. */
.r-month { font-size:15px; font-weight:600; color:var(--ink); background:transparent;
           border:1px solid transparent; border-radius:8px; padding:4px 26px 4px 8px;
           margin-left:-8px; cursor:pointer; min-width:0;
           -webkit-appearance:none; appearance:none;
           background-image:
             linear-gradient(45deg, transparent 50%, currentColor 50%),
             linear-gradient(135deg, currentColor 50%, transparent 50%);
           background-size:5px 5px, 5px 5px;
           background-position:calc(100% - 13px) center, calc(100% - 9px) center;
           background-repeat:no-repeat; }
.r-month:hover, .r-month:focus-visible { border-color:var(--line); background-color:var(--bg); }
/* The options themselves are drawn by the platform, which does not inherit any of the
   above — without this they come back as black on white inside a dark menu. */
.r-month option { background:var(--card); color:var(--ink); font-weight:400; }
.r-hero { text-align:center; padding:22px 0 6px; }
.r-big { font-family:var(--mono); font-size:33px; font-weight:650; color:var(--accent);
         letter-spacing:-0.02em; }
.r-sub { font-size:12.5px; color:var(--dim); }
.r-note-inline { font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.5;
                 max-width:30ch; margin-left:auto; margin-right:auto; }
.r-counter { text-align:center; font-size:12.5px; color:var(--warn);
             background:var(--warn-bg); border-radius:8px; padding:9px 12px; margin:14px 0 18px; }
/* Cap the channel list so the amount control and notes below stay reachable
   without scrolling past a long list. ~10 rows. */
#r-list { max-height:340px; overflow-y:auto; }
#r-list::-webkit-scrollbar { width:8px; }
#r-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.r-more { font-size:11.5px; color:var(--dim); padding:8px 0 0; }
.r-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline;
         padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.r-row .n { display:flex; align-items:baseline; gap:8px; min-width:0; }
.r-row .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Filled dot = subscribed. Hollow ring keeps the names aligned for the rest. */
.r-row .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0;
              border:1px solid var(--line); }
.r-row .dot.on { background:var(--accent); border-color:var(--accent); }
.r-row .t { font-family:var(--mono); font-size:11.5px; color:var(--dim); }
.r-row .a { font-family:var(--mono); font-weight:650; min-width:46px; text-align:right; }
.r-foot { display:flex; justify-content:space-between; align-items:center;
          margin-top:18px; font-size:13px; color:var(--dim); }
.r-foot input { width:5.5ch; background:var(--bg); color:var(--ink);
                border:1px solid var(--line); border-radius:6px; padding:3px 6px;
                font-family:var(--mono); }
.r-foot input::-webkit-outer-spin-button,
.r-foot input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.r-note { font-size:11.5px; color:var(--dim); line-height:1.55; margin-top:16px;
          border-top:1px solid var(--line); padding-top:14px; }

@media (max-width:900px) { #receipt { width:100%; } }

#authmodal { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.55);
             display:flex; align-items:center; justify-content:center; padding:20px; }
.authcard { background:var(--card); border:1px solid var(--line); border-radius:12px;
            padding:26px; width:100%; max-width:390px; }
.authcard h2 { font-size:19px; margin:0 0 8px; }
.authnote { font-size:12.5px; color:var(--dim); line-height:1.55; margin:0 0 18px; }
#authform { display:flex; flex-direction:column; gap:10px; }
#authform input { padding:10px 13px; border:1px solid var(--line); border-radius:8px;
                  background:var(--bg); color:var(--ink); }
#authform input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
#authform button { padding:10px; margin-top:4px; }
.autherr { font-size:12.5px; color:var(--warn); background:var(--warn-bg);
           border-radius:7px; padding:8px 11px; }
.authfoot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.linkish { background:none; border:none; color:var(--accent); font-size:13px;
           cursor:pointer; padding:0; text-decoration:underline; }
.devlink { margin-top:14px; font-size:11.5px; color:var(--dim); border:1px dashed var(--line);
           border-radius:7px; padding:9px 11px; word-break:break-all; line-height:1.5; }
.devlink a { color:var(--accent); }

.notice.verify { background:var(--accent-bg); color:var(--accent); }
.vactions { display:flex; gap:8px; flex-shrink:0; }

/* Profile is styled as a channel page: same banner, avatar and tab furniture, so it
   reads as "your page" rather than a settings screen. No uploads yet, so the banner
   and avatar are generated from the account rather than uploaded. */
#p-bannerart { width:100%; height:100%; }
.avatar.initial { display:flex; align-items:center; justify-content:center;
                  font-size:32px; font-weight:650; color:#fff; }
.pstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
          margin-bottom:26px; }
.pstat { border:1px solid var(--line); border-radius:10px; padding:15px 17px;
         background:var(--card); }
.pstat .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.pstat .v { font-family:var(--mono); font-size:22px; font-weight:650; margin-top:4px;
            letter-spacing:-0.02em; }
.pblock { border:1px solid var(--line); border-radius:10px; padding:18px 20px;
          background:var(--card); margin-bottom:16px; max-width:620px; }
.pblock h3 { font-size:14px; margin:0 0 6px; }
.pblock p { font-size:13px; color:var(--dim); margin:0 0 14px; line-height:1.55; }
.pblock form { display:flex; flex-direction:column; gap:9px; max-width:320px; }
.pblock input { padding:9px 12px; border:1px solid var(--line); border-radius:8px;
                background:var(--bg); color:var(--ink); }
.pill.warn { border-color:var(--warn); color:var(--warn); }

/* Header avatar button replaces the old Profile nav link and the Sign out button. */
.avbtn { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex;
         align-items:center; justify-content:center; text-decoration:none; color:#fff;
         font-weight:650; font-size:15px; background-size:cover; background-position:center;
         border:1px solid var(--line); }
.avbtn:hover { border-color:var(--accent); }

#p-edit { margin-left:auto; flex-shrink:0; }
.avatar.initial { background-size:cover; background-position:center; }
.cbanner #p-bannerart { background-size:cover; background-position:center; }

/* ---------- clickable banner and avatar ----------
   On your own profile the obvious way to change a picture is to click the picture, so
   both are buttons covering their image. The banner darkens on hover behind a pill that
   is always visible; the avatar keeps a small camera badge for the same reason —
   an affordance that only exists on hover does not exist on a touch screen. */
.imgedit { position:absolute; inset:0; padding:0; border:0; background:none;
           cursor:pointer; border-radius:inherit; }
.imgedit .scrim { position:absolute; inset:0; border-radius:inherit; opacity:0;
                  background:rgba(0,0,0,.42); transition:opacity .16s; }
.imgedit:hover .scrim, .imgedit:focus-visible .scrim { opacity:1; }
.pillbtn { position:absolute; right:12px; top:12px; display:inline-flex; align-items:center;
           gap:6px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
           color:#fff; background:rgba(18,18,18,.62); }
.imgedit:hover .pillbtn, .imgedit:focus-visible .pillbtn { background:rgba(18,18,18,.88); }
@media (max-width:560px) { .pillbtn span { display:none; } .pillbtn { padding:7px; } }

.avwrap { position:relative; flex-shrink:0; }
.imgedit.av { border-radius:50%; }
.imgedit.av .badge { position:absolute; right:-2px; bottom:-2px; width:27px; height:27px;
                     border-radius:50%; display:flex; align-items:center;
                     justify-content:center; background:var(--ink); color:var(--bg);
                     border:2px solid var(--bg); }
.imgedit.av .badge .ic { width:13px; height:13px; }
.imgedit.av:hover .badge, .imgedit.av:focus-visible .badge { background:var(--accent); }

/* Remove-from-a-row button on a card. Kept off the thumbnail until the card is hovered,
   but always shown where there is no hover to detect. */
.cardx { position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0;
         border:0; border-radius:50%; background:rgba(18,18,18,.72); color:#fff;
         display:flex; align-items:center; justify-content:center; cursor:pointer;
         opacity:0; transition:opacity .14s, background-color .14s; }
.card:hover .cardx, .cardx:focus-visible { opacity:1; }
.cardx:hover { background:rgba(18,18,18,.92); }
.cardx .ic { width:14px; height:14px; }
@media (hover:none) { .cardx { opacity:1; } }

/* Watch progress: a green bar across the bottom of the thumbnail, plus a Watched tag. */
.thumbwrap { position:relative; }
.thumbwrap img { display:block; }
.pbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.55); }
.pbar span { display:block; height:100%; background:var(--accent); }
.watched-tag { position:absolute; top:7px; left:7px; background:rgba(0,0,0,.72);
               color:#fff; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
               padding:3px 7px; border-radius:4px; font-weight:600; }
.card.seen h3 { color:var(--dim); }

.cw-title { font-size:17px; font-weight:650; letter-spacing:-0.01em; color:var(--ink); }
.cwgrid { margin-top:12px; }

/* Two vote groups: YouTube's numbers (read-only) and Rialto's own (clickable). */
.votes { flex-wrap:wrap; }
.vgroup { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.vgroup.rialto { padding-left:22px; margin-left:8px; border-left:1px solid var(--line); }
.glabel { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
          color:var(--dim); font-weight:600; }
.votebtn { display:flex; gap:7px; align-items:center; background:none; cursor:pointer;
           border:1px solid var(--line); border-radius:999px; padding:4px 13px;
           color:var(--ink); font-size:14px; }
.votebtn:hover { border-color:var(--accent); }
.votebtn[aria-pressed="true"] { background:var(--accent-bg); border-color:var(--accent);
                                color:var(--accent); font-weight:650; }
.votebtn .ico { font-size:11px; color:var(--dim); }
.votebtn[aria-pressed="true"] .ico { color:var(--accent); }

#comments { margin-top:34px; border-top:1px solid var(--line); padding-top:22px; }
.chead2 { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.chead2 h2 { font-size:17px; margin:0; }
.cmt { display:grid; grid-template-columns:38px 1fr; gap:12px; padding:12px 0;
       border-bottom:1px solid var(--line); }
.cmt.reply { margin-left:50px; border-bottom:none; padding:8px 0; }
/* Lines up with the replies it is talking about, and reads as a note rather than a control:
   there is nothing to click, because the rest of the thread was never fetched. */
.reply-note { margin:0 0 10px 50px; font-size:11.5px; color:var(--dim); }
.cmt img { width:38px; height:38px; border-radius:50%; background:var(--line);
           object-fit:cover; }
.cmt.reply img { width:28px; height:28px; }
.cmt .who { font-size:12.5px; font-weight:650; margin-bottom:3px; }
.cmt .who .meta2 { font-weight:400; color:var(--dim); margin-left:7px; font-size:11.5px; }
.cmt .body { font-size:13.5px; line-height:1.55; white-space:pre-wrap;
             overflow-wrap:anywhere; }
.cmt .foot { font-size:11.5px; color:var(--dim); margin-top:5px; }
.cmt .badge { background:var(--accent-bg); color:var(--accent); border-radius:4px;
              padding:1px 6px; font-size:10.5px; font-weight:600; margin-left:6px; }

/* Up is green, down is red — in both the YouTube group and Rialto's. */
/* Explicit .up/.down classes, not positional selectors: :first-of-type counts every
   sibling span, and the group label is the first one — which coloured the like arrow
   red and left the dislike arrow uncoloured. */
.vote.up .ico, .votebtn#r-like .ico { color: var(--accent); }
.vote.down .ico, .votebtn#r-dislike .ico { color: var(--warn); }
.votebtn#r-dislike[aria-pressed="true"] { background: var(--warn-bg);
  border-color: var(--warn); color: var(--warn); }
.votebtn#r-dislike[aria-pressed="true"] .ico { color: var(--warn); }

/* ---------- settings ----------
   Rows of label · value · action, so a settings page reads as a list of settings rather
   than a stack of small forms that each save on their own. */
.pblock.wide { max-width:none; }
.setline { display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center;
           padding:13px 0; border-top:1px solid var(--line); }
.setline:first-of-type { border-top:0; padding-top:4px; }
.pblock h3 + .setline { border-top:0; }
.sl { font-size:13.5px; font-weight:600; }
.sv { font-size:13px; color:var(--dim); min-width:0; }
.sa { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
/* An unstyled select renders with the platform's light chrome, which reads as a hole in
   the page in dark mode. */
.sa select { background:var(--card); color:var(--ink); border:1px solid var(--line);
             border-radius:8px; padding:7px 11px; cursor:pointer; }
.sa select:hover { border-color:var(--accent); }
.svstack { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.setnote { font-size:12.5px; color:var(--warn); background:var(--warn-bg); border-radius:7px;
           padding:8px 11px; margin:0 0 4px; }
.togrow { display:flex; gap:8px; flex-wrap:wrap; }
.editslot { display:block; }
.editform { display:flex; flex-direction:column; gap:12px; padding:14px 0 4px;
            border-top:1px solid var(--line); }
.ghost.danger:hover { border-color:var(--warn); color:var(--warn); }
.subbtn.danger { background:var(--warn); border-color:var(--warn); }
.danger2 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.askq { font-size:12.5px; color:var(--warn); }
@media (max-width:620px) {
  .setline { grid-template-columns:1fr; gap:7px; }
  .sa { justify-content:flex-start; }
}

/* ---------- edit profile dialog ---------- */
#editmodal { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55);
             display:flex; align-items:center; justify-content:center; padding:20px;
             overflow-y:auto; }
.editcard { background:var(--card); border:1px solid var(--line); border-radius:14px;
            padding:20px 22px 22px; width:100%; max-width:520px; margin:auto; }
.ecard-head { display:flex; align-items:center; justify-content:space-between;
              margin-bottom:16px; }
.ecard-head h2 { font-size:18px; margin:0; letter-spacing:-0.01em; }
.iconbtn { width:32px; height:32px; padding:0; display:flex; align-items:center;
           justify-content:center; border:1px solid var(--line); border-radius:50%;
           background:none; color:var(--dim); cursor:pointer; }
.iconbtn:hover { border-color:var(--accent); color:var(--accent); }

.ehero { position:relative; margin-bottom:36px; }
.imgpick { position:relative; padding:0; border:0; cursor:pointer; overflow:visible; }
.imgpick .art { position:absolute; inset:0; border-radius:inherit; background-size:cover;
                background-position:center; display:flex; align-items:center;
                justify-content:center; color:#fff; }
.imgpick .ov { position:absolute; inset:0; border-radius:inherit; display:flex;
               align-items:center; justify-content:center; gap:7px; opacity:0;
               color:#fff; background:rgba(0,0,0,.44); font-size:12.5px; font-weight:600;
               transition:opacity .16s; }
.imgpick:hover .ov, .imgpick:focus-visible .ov { opacity:1; }
.ebanner { display:block; width:100%; aspect-ratio:5/1; border-radius:10px;
           background:var(--line); }
.ebanner .art, .ebanner .ov { border-radius:10px; }
.eavatar { position:absolute; left:18px; bottom:-24px; width:70px; height:70px;
           border-radius:50%; background:var(--line);
           box-shadow:0 0 0 3px var(--card); }
.eavatar .art { border-radius:50%; font-size:27px; font-weight:650; }
.eavatar .ov { border-radius:50%; }

.erow { display:flex; gap:14px; align-items:center; justify-content:flex-end;
        margin-bottom:18px; }
.ehint { font-size:12px; color:var(--dim); margin-right:auto; }
.efield { display:flex; flex-direction:column; gap:6px; }
.efield .lab { font-size:12.5px; font-weight:600; }
.efield input { padding:10px 13px; border:1px solid var(--line); border-radius:8px;
                background:var(--bg); color:var(--ink); width:100%; }
.efield input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.efield .hint { font-size:11.5px; color:var(--dim); line-height:1.5; }
.eerr { font-size:12.5px; color:var(--warn); background:var(--warn-bg); border-radius:7px;
        padding:9px 11px; margin-top:12px; }
.efoot { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.efoot.start { justify-content:flex-start; }
.efoot .subbtn { padding:9px 20px; }

/* ---------- toasts ----------
   Bottom left, clear of the receipt panel on the right. */
#toasts { position:fixed; left:20px; bottom:20px; z-index:80; display:flex;
          flex-direction:column-reverse; gap:9px; max-width:min(420px, calc(100vw - 40px)); }
.toast { display:flex; align-items:center; gap:12px; background:var(--ink); color:var(--bg);
         border-radius:10px; padding:11px 11px 11px 15px; font-size:13.5px;
         box-shadow:0 6px 22px rgba(0,0,0,.22); animation:toastin .18s ease-out; }
.toast.bad { background:var(--warn); color:#fff; }
.toast.out { opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; }
.tmsg { flex:1; }
.taction { background:none; border:0; padding:0 2px; color:inherit; font-weight:700;
           font-size:13.5px; cursor:pointer; text-decoration:underline; flex-shrink:0; }
.tclose { width:24px; height:24px; padding:0; flex-shrink:0; display:flex;
          align-items:center; justify-content:center; border:0; border-radius:50%;
          background:none; color:inherit; opacity:.65; cursor:pointer; }
.tclose:hover { opacity:1; }
.tclose .ic { width:13px; height:13px; }
@keyframes toastin { from { opacity:0; transform:translateY(8px); } }
@media (max-width:900px) { #toasts { left:12px; right:12px; bottom:12px; max-width:none; } }

/* ---------- channel hits in search results ----------
   A circular avatar is what distinguishes a channel result from a video result, so these
   deliberately look nothing like the cards below them. */
.chanhits { margin-bottom: 26px; }
.hitshead { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim);
            font-weight:600; margin:0 0 11px; }
/* A grid rather than a wrapping flex row: with two or three hits of different name
   lengths, flex-wrap left them ragged and one orphaned on its own line. */
.hitsrow { display:grid; gap:12px;
           grid-template-columns:repeat(auto-fill, minmax(285px, 1fr)); }
.chanhit { display:flex; align-items:center; gap:12px; padding:11px 15px 11px 12px;
           border:1px solid var(--line); border-radius:12px; background:var(--card);
           min-width:0; }
.chanhit:hover { border-color:var(--accent); }
.hitlink { display:flex; align-items:center; gap:12px; text-decoration:none;
           color:inherit; min-width:0; flex:1; }
.hitav { width:46px; height:46px; border-radius:50%; flex-shrink:0; background:var(--line);
         background-size:cover; background-position:center; }
.hitnames { min-width:0; display:flex; flex-direction:column; }
.hitname { font-weight:650; font-size:14.5px; display:flex; align-items:center; gap:5px;
           min-width:0; }
/* Long channel names ellipsis rather than widening the cell and breaking the grid. The
   name needs its own element for that — text-overflow does not apply to a bare text
   node sitting in a flex container. */
.hitname .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hitlink:hover .hitname { color:var(--accent); }
.hitmeta { font-size:12px; color:var(--dim); }
.vtick { display:inline-flex; color:var(--dim); flex-shrink:0; }
.vtick .ic { width:13px; height:13px; }
.chanhit .subbtn { flex-shrink:0; }
@media (max-width:560px) { .chanhit { min-width:0; width:100%; } }

/* ---------- streaming feed progress ----------
   A partly-loaded feed has to say so, or it just looks like a short feed. */
#feed-more { display:flex; align-items:center; gap:9px; padding:20px 2px 0;
             font-size:13px; color:var(--dim); }
#feed-more:empty { display:none; }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--accent);
         animation:pulse 1.1s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }

/* Refresh button on the feed. The icon spins only while a check is in flight. */
#f-refresh { display:inline-flex; align-items:center; gap:6px; }
#f-refresh .ic { width:13px; height:13px; }
#f-refresh[data-pending] .ic { animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }