/* GayStash — single-stash page. Loaded only by the pages that need it. */ /* ── watch page ─────────────────────────────────────────────────── */ .watch{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:14px} .player{ position:relative;aspect-ratio:16/9;width:100%; border-radius:var(--r-lg);overflow:hidden;background:var(--t5); } .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .play-big{ position:absolute;inset:0;display:grid;place-items:center;gap:12px; align-content:center;background:rgba(0,0,0,.18); } .play-big span{ width:68px;height:68px;border-radius:50%;background:var(--accent); display:grid;place-items:center; transition:background .14s var(--ease); } .play-big svg{width:23px;height:23px;fill:var(--accent-ink);margin-left:3px} .play-big:hover span{background:var(--accent-hi)} .play-big em{font-style:normal;font-size:14.5px;font-weight:700;color:#fff} /* ── the disclosure ───────────────────────────────────────────── Where it plays and what that costs, printed along the bottom of the poster — on the thing being pressed, not in a callout underneath it. The record panel already carries both facts; a bordered box repeating them a third time is noise. A clean host shows the name and no chip, so the chip's presence is the whole signal. */ .dest{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;align-items:center;gap:10px;padding:22px 14px 11px; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66)); font-size:13px;font-weight:600;color:rgba(255,255,255,.82); } .dest .gap{flex:1} .dest b{display:flex;align-items:center;gap:7px;color:var(--warn);font-weight:700} .dest b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none} /* the promise the product makes, stated once, quietly, in running text */ .load{padding-top:9px;font-size:12.5px;font-weight:500;color:var(--text-3)} /* two points above a section head, no more — the poster is the headline here, and titles like "GAY BOY SEX PART (42)" don't reward 38px */ .watch-title{font-size:clamp(19px,2.6vw,28px);line-height:1.2;padding:15px 0 9px} .watch-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--text-3);padding-bottom:14px} /* ── the actions ──────────────────────────────────────────────── Six pills of equal weight for six actions that are not equal. Two of them are what you press — Like and Stash it; the other four are things you do about the record now and then. On a 390px screen the row wrapped and left Report stranded on a line of its own, which looked like a bug because it was one: the layout had no opinion, so the browser formed one. display:contents keeps one set of markup serving both shapes — inline on a wide screen, its own row on a phone. */ .watch-acts{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px} .acts2{display:contents} /* A container query, not a viewport one. What decides whether six pills fit is the width of this column, and that is not a function of the window: at 1000px the rail appears and takes 344px plus a 26px gap out of it, so the column is *narrower* on a 1050px desktop than on a 900px tablet. A viewport breakpoint has to guess at that band and will guess wrong the moment the rail, the gap or the page padding changes. */ .watch > div:first-child{container-type:inline-size} @container (max-width:640px){ /* Nothing is hidden and nothing scrolls off. The four quiet actions take a full-width row under the two loud ones and drop the pill, so the second row reads as a decision rather than as an overflow. */ .acts2{ flex:1 0 100%;display:flex;align-items:center;gap:20px; padding-top:4px;margin-top:8px;border-top:1px solid var(--line); } /* height is left alone so the 38px / 44px-on-coarse tap target survives losing the pill — a text link you cannot hit is not an improvement */ .acts2 .btn{background:none;padding:0;font-size:13.5px;color:var(--text-3)} .acts2 .btn:hover{background:none;color:var(--text)} .acts2 .pop-body .btn{background:var(--accent);color:var(--accent-ink);padding:0 16px} } /* A record can carry 25 tags. Clamped to two rows, because a row is what costs vertical space — a fixed chip count is meaningless when "solo" and "straight guys first time" are both one chip. */ .taglist{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:4px} .taglist .pill.more{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-3)} .taglist .pill.more:hover{background:var(--surface-2);color:var(--text)} /* details panel — a list, not a table */ .panel{background:var(--surface);border-radius:var(--r-lg);overflow:hidden} .panel h2{font-size:15px;padding:14px 16px 12px;letter-spacing:-.015em} .prow{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 16px;border-top:1px solid var(--line);font-size:13.5px; } .prow dt,.prow .k{color:var(--text-3);font-weight:600;flex:none} .prow dd,.prow .v{margin:0;color:var(--text);font-weight:600;text-align:right;min-width:0} .prow .v a{color:var(--text)} .prow .v a:hover{color:var(--accent)} .uploader{display:flex;align-items:center;gap:11px;padding:14px 16px;border-top:1px solid var(--line)} .uploader .av{width:38px;height:38px;font-size:14px} .uploader div{min-width:0;flex:1} .uploader strong{display:block;font-size:14.5px;font-weight:700} .uploader span:not(.av){display:block;font-size:12.5px;font-weight:500;color:var(--text-3)} /* ── liked by ─────────────────────────────────────────────────── The panel's job is the count and the two names that mean something to you. Everything else is behind a control, ordered so opening it is worth doing. */ .likers h2 .count{color:var(--text-3);font-weight:700} .lk-top{display:flex;align-items:center;gap:11px;padding:0 16px 14px} /* Overlapped, and five at most. A grid of discs grows with the count; a stack does not, which is the whole point — it says "some people" at 9 and at 900 without ever becoming forty rows of monograms. */ .lk-stack{display:flex;flex:none} .lk-stack .av{ width:28px;height:28px;font-size:11.5px; box-shadow:0 0 0 2px var(--surface); } .lk-stack .av + .av{margin-left:-9px} .lk-top p{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--text-3)} .lk-top a{color:var(--text-2);font-weight:700} .lk-top a:hover{color:var(--accent)} .lk-top b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums} .lk-list{display:flex;flex-direction:column;max-height:340px;overflow-y:auto} .lk{ display:flex;align-items:center;gap:10px;min-width:0; padding:8px 16px;border-top:1px solid var(--line); } .lk:hover{background:var(--surface-2)} .lk .av{width:30px;height:30px;font-size:12px} .lk-b{min-width:0} .lk-b strong{ display:block;font-size:13.5px;font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .lk:hover .lk-b strong{color:var(--accent)} /* direct child and :not(.av) — a bare descendant rule would turn the separator into its own line and break the avatar's centring */ .lk-b > span:not(.av){ display:block;padding-top:1px; font-size:11.5px;font-weight:500;color:var(--text-3); } .lk-b .dot{margin:0 4px} /* most of a 212-liker list has never stashed anything; shown, not hidden, and not competing with the ones worth a click */ .lk.thin strong{color:var(--text-2);font-weight:600} .lk.thin .av{opacity:.6} .lk-go{padding:12px 16px 14px;border-top:1px solid var(--line)} .lk-tail{ padding-top:9px;font-size:11.5px;font-weight:500; line-height:1.45;color:var(--text-3); } .lk-tail b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums} /* ── in these collections ─────────────────────────────────────── Two across in the content column. Above the recommendations because a set a person built by hand and put this in beats "same tags, other stashers" as a guess at the next video. */ .incolls .colls{padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px} .adbox{ margin-top:16px;border-radius:var(--r-lg);background:var(--surface); border:1px dashed var(--line-2);min-height:210px; display:flex;flex-direction:column;justify-content:flex-end;padding:14px; } .adbox b{display:block;font-size:12.5px;font-weight:700;color:var(--text-2);padding-bottom:5px} .adbox p{font-size:13px;font-weight:500;color:var(--text-3);line-height:1.5} /* popover + report */ .pop{position:relative} .pop-body{ position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(92vw,330px); background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px; } .pop-body p{font-size:13px;font-weight:500;color:var(--text-3);padding-bottom:9px} .pop-row{display:flex;gap:7px} .pop-row input{ flex:1;min-width:0;height:38px;padding:0 12px;border-radius:var(--r-sm); background:var(--bg);border:1px solid var(--line-2);font-size:13px;font-weight:500; } .report{background:var(--surface);border-radius:var(--r-md);padding:14px;margin-bottom:16px} .report > p{font-size:14px;font-weight:700;padding-bottom:10px} .reasons{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:12px} .reasons label{ display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px; border-radius:var(--r-pill);background:var(--surface-2); font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer; } .reasons label:hover{background:var(--surface-3);color:var(--text)} .reasons input{accent-color:var(--accent);margin:0} /* EVERY SELECTOR BELOW IS SCOPED UNDER .pick, WHICH THE DESIGN'S SHEET DOES NOT DO, AND IT MUST STAY THAT WAY. .prow is the RECORD PANEL's row — Source, Ads, Type, Added — and it is also the picker's row, in the design's own markup. Its two rules collide, the picker's comes second, and the record panel silently inherited 7px padding, no border-top, cursor:pointer and font:inherit: rows half a step tighter, the dividers between them gone, the type a size larger. The owner spotted it on the live page within minutes of the picker landing. .lnk is the second one, and it reaches further: modern-notifications.css defines it for the bell panel and is loaded in the chrome of EVERY page, so the picker's grey underlined version was restyling a control that has nothing to do with this panel. Both are the design sheet's collisions rather than this port's, and both are worth pushing upstream — a class named .prow doing two unrelated jobs in one stylesheet will do it again to whoever ports the next page. ── collection picker ────────────────────────────────────────── Inline, under the action row, in the same disclosure grammar as .report rather than a dialog over the record. The old one was a modal that covered what you were looking at and made every save cost a decision; this saves first and offers the filing underneath, so the tap that keeps something is still one tap. On a phone it also means the player stays on screen, which a full-height sheet cannot manage. */ .pick{background:var(--surface);border-radius:var(--r-md);padding:13px;margin-bottom:16px} .pick-top{display:flex;align-items:center;gap:10px;padding-bottom:12px} .pick-said{ display:flex;align-items:center;gap:7px;flex:1;min-width:0; font-size:14px;font-weight:700;color:var(--text); } /* The confirmation is the loud part and the filing is quiet, because the first is what most people came for. */ .pick-said .icon{ width:17px;height:17px;flex:none;fill:none;stroke:var(--live); stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; } .pick .lnk{ background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700; color:var(--text-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer; } .pick .lnk:hover{color:var(--text)} .pick-h{font-size:13px;font-weight:700;color:var(--text-2);padding-bottom:9px} .pick .opt{font-size:11.5px;font-weight:600;color:var(--text-3);padding-left:4px} .pick-empty{display:none;font-size:12.5px;font-weight:500;color:var(--text-3);padding-bottom:10px} .pick[data-has="0"] .pick-empty{display:block} .pick-find{position:relative;padding-bottom:8px} .pick-find .icon{ position:absolute;left:11px;top:11px;width:16px;height:16px; fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;pointer-events:none; } .pick-find input{ width:100%;height:38px;padding:0 12px 0 34px;border-radius:var(--r-sm); background:var(--bg);border:1px solid var(--line-2); font-size:13.5px;font-weight:500;color:var(--text); } .pick-find input::placeholder{color:var(--text-3)} /* Furniture at four collections, the only way in at forty. The count lives on the panel so one rule decides it. */ .pick:not([data-many]) .pick-find{display:none} .pick[data-has="0"] .pick-find .pick[data-has="0"] .pick-list .pick[data-has="0"] .pmore .pick[data-has="0"] .prow-new{display:none} /* No global list reset in modern.css, so it is done here rather than added to the shared sheet for one panel. */ .pick-list{list-style:none;margin:0;padding:0} /* The scroller only exists once the list is expanded. In the default five rows there is nothing to scroll, and a max-height there just clipped the last row in half, which reads as broken rather than as "more below". */ .pick[data-all] .pick-list{max-height:264px;overflow-y:auto;overscroll-behavior:contain} .pick .prow{ display:flex;align-items:center;gap:11px;width:100%; padding:7px 9px 7px 7px;border:0;border-radius:var(--r-sm); background:none;text-align:left;cursor:pointer;font:inherit; } .pick .prow:hover{background:var(--surface-2)} .pick .prow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* The collection's own tiles, not a folder glyph. Four identical folders in a column tell you nothing; these are the same colours the collection wears on its card, so the one you want is recognisable before you read it. */ .pick .pmini{ width:36px;height:36px;flex:none;border-radius:7px;overflow:hidden; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5px; background:var(--surface-3); } .pick .pmini i{display:block} .pick .pmini-0{background:var(--surface-3);display:block} .pick .pmini-new{ display:flex;align-items:center;justify-content:center; background:var(--surface-3); } .pick .pmini-new .icon{width:19px;height:19px;fill:none;stroke:var(--text-2);stroke-width:2.2;stroke-linecap:round} .pick .pbody{flex:1;min-width:0} .pick .pname{ display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Replaces "Click to save", which was on every row, said the same thing on every row, and was wrong on the 70% of sessions that never click. The size and the last time it was used are what tell two collections apart. */ .pick .pmeta{ display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding-top:2px; font-size:12px;font-weight:500;color:var(--text-3); } .pick .pmeta .lock{display:inline-flex;align-items:center;gap:4px;color:var(--text-2)} .pick .pmeta .lock .icon{ width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } .pick .ptick{ width:22px;height:22px;flex:none;border-radius:6px; border:2px solid var(--line-2);background:var(--bg);position:relative; } .pick .prow:hover .ptick{border-color:var(--text-3)} .pick .prow[aria-pressed=true] .ptick{background:var(--accent);border-color:var(--accent)} /* Two borders on a rotated box, not a glyph: the checkmark character sits differently in every font and one of these already went wrong that way. */ .pick .prow[aria-pressed=true] .ptick::after{ content:"";position:absolute;left:50%;top:50%; width:5px;height:9px;border:solid #fff;border-width:0 2.2px 2.2px 0; transform:translate(-50%,-58%) rotate(45deg); } .pick .pmore{ background:none;border:0;padding:8px 7px 2px;font:inherit; font-size:12.5px;font-weight:700;color:var(--text-3);cursor:pointer; } .pick .pmore:hover{color:var(--accent)} .pick[data-all] .pmore{display:none} .pick:not([data-all]) .pmore-hide{display:none} .pick-none{font-size:13px;font-weight:500;color:var(--text-3);padding:10px 7px} .pick .pnew{border-top:1px solid var(--line);margin-top:9px;padding-top:9px} .pick .pnew-form{padding:4px 7px 2px} .pick .pnew-form input[type=text]{ width:100%;height:38px;padding:0 12px;border-radius:var(--r-sm); background:var(--bg);border:1px solid var(--line-2); font-size:14px;font-weight:600;color:var(--text); } .pick .pnew-vis{display:flex;gap:7px;padding:9px 0 10px} .pick .pnew-vis label{ display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px; border-radius:var(--r-pill);background:var(--surface-2); font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer; } .pick .pnew-vis input{accent-color:var(--accent);margin:0;padding:0} .pick[data-has="0"] .pnew{border-top:0;margin-top:0;padding-top:0} .pick-foot{ display:flex;align-items:center;gap:10px; border-top:1px solid var(--line);margin-top:11px;padding-top:11px; } .pick-state{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text-3)} @media (pointer:coarse){ .pick .prow{padding:9px} .pick .ptick{width:24px;height:24px} } .fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;padding:20px;background:var(--surface);text-align:center} .fallback p{font-size:14.5px;font-weight:600;color:var(--text-2);max-width:40ch} /* ── what comes next ──────────────────────────────────────────── Last on the page, and that is the point: these are the exit, and an exit belongs at the end. Comments used to sit below them because they are empty on most records and the column needed length. Two things changed that. The empty state now collapses to a single composer line, so it costs ~60px rather than a gap; and the collections section arrived, which is fixed-height and does the column-length job on its own. */ .nextup .grid{padding:0;gap:16px 12px} .rall{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:13px 2px 0;margin-top:16px;border-top:1px solid var(--line); font-size:13px;font-weight:700;color:var(--accent); } .rall b{color:var(--text-3);font-variant-numeric:tabular-nums} @media (min-width:1000px){ .watch{ padding:18px 22px 34px;grid-template-columns:minmax(0,1fr) 344px; gap:26px 26px;align-items:start; } /* Two items, two columns, no row machinery. The three-row grid and its slack absorber existed only because comments were a separate grid item sitting below everything else; now that they are in the content column where they belong, there is one item per column and nothing to distribute. */ .w-rail{position:sticky;top:74px} /* three across in a ~700px column beats a 118px list squeezed into 344 */ .nextup .grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0} /* collections get three too — but they carry a name and a count under them, so they read at a narrower width than a video card does */ .incolls .colls{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px} } /* ── comments ─────────────────────────────────────────────────── On a link index the two comments people actually write are "link is dead" and "who is this?". The first is a report wearing the wrong hat, so it gets routed; the second is the one worth having, so the empty state asks for it by name. */ /* Most records will never get a comment. That makes the empty state the common state, so it has to be small: no sort control for nothing, no paragraph of encouragement, and a composer that is one line until somebody actually means it. */ .cmts{padding-top:26px} .cmts-h{display:flex;align-items:baseline;gap:11px;padding-bottom:12px} .cmts-h h2{font-size:17px;letter-spacing:-.02em} .cmts-h .count{font-size:13px;font-weight:700;color:var(--text-3);opacity:1} .cmts-h .ctrl{padding:0;margin-left:auto} /* the composer */ .cmp{ display:flex;gap:11px;align-items:flex-start; background:var(--surface);border-radius:var(--r-lg);padding:13px; } .cmp .av{width:34px;height:34px;font-size:13px;margin-top:2px} .cmp-b{flex:1;min-width:0} .cmp textarea{ width:100%;min-height:44px;padding:8px 0 0;resize:vertical; background:none;border:0;outline:none; font-size:15px;font-weight:500;line-height:1.5;color:var(--text); } .cmp textarea::placeholder{color:var(--text-3)} /* collapsed until focus — the composer is the whole component on a page with no thread, and a 300px card asking for nothing is furniture */ .cmp{padding:11px 13px;transition:padding .14s var(--ease)} .cmp textarea{min-height:24px;padding:5px 0 0} .cmp-foot{display:none} .cmp.open{padding:13px} .cmp.open textarea{min-height:52px;padding:8px 0 0} .cmp.open .cmp-foot{ display:flex;align-items:center;gap:10px; padding-top:10px;margin-top:10px;border-top:1px solid var(--line); } .cmp-foot .gap{flex:1} .cmp-n{font-size:12px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums} .cmp-n.near{color:var(--warn)} .cmp-n.over{color:var(--accent)} /* "link is dead" is a report, not a comment. Offered as it is typed rather than after it has been posted where nobody will action it. */ .nudge{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:11px;padding-top:11px;border-top:1px solid var(--line); font-size:13px;font-weight:500;line-height:1.5;color:var(--text-2); } .nudge b{color:var(--text);font-weight:700} .nudge .gap{flex:1} /* reading needs no account anywhere else on this site, so the signed-out state reads the thread and is asked only at the point of writing */ .cmp-out{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--surface);border-radius:var(--r-lg);padding:15px 16px; font-size:14px;font-weight:500;color:var(--text-2); } .cmp-out .gap{flex:1;min-width:0} .cmts[data-c=in] .cmp-out,.cmts[data-c=out] .cmp{display:none} /* the thread */ .cthread{display:flex;flex-direction:column;padding-top:6px} .cmt{display:flex;gap:11px;padding:15px 0;border-top:1px solid var(--line)} .cmt .av{width:34px;height:34px;font-size:13px;flex:none} .cmt-b{min-width:0;flex:1} .cmt-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--text-3)} .cmt-head strong{font-size:14px;font-weight:700;color:var(--text)} .cmt-head .op{ height:19px;padding:0 7px;border-radius:var(--r-pill); background:var(--surface-3);color:var(--text-2); font-size:10.5px;font-weight:800;letter-spacing:.03em; display:inline-flex;align-items:center; } .cmt-say{ padding-top:5px;font-size:14.5px;font-weight:500;line-height:1.55;color:var(--text-2); overflow-wrap:anywhere; } .cmt-say a{color:var(--accent);font-weight:600} .cmt-acts{display:flex;align-items:center;gap:16px;padding-top:8px} .cmt-acts button{ display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:700;color:var(--text-3); transition:color .14s var(--ease); } .cmt-acts button:hover{color:var(--text)} .cmt-acts button[aria-pressed=true]{color:var(--accent)} .cmt-acts svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9} .cmt-acts .n{font-variant-numeric:tabular-nums} /* a comment the classifier or a moderator pulled. The row stays so the thread does not silently reshuffle under anyone reading it. */ .cmt.gone-c .cmt-say{color:var(--text-3);font-style:italic} .cmt-none{ padding:22px 0 6px;max-width:56ch; font-size:14.5px;font-weight:500;line-height:1.6;color:var(--text-3); } .cmt-none b{color:var(--text-2);font-weight:700} .cmt-more{padding-top:14px} /* ── nothing here yet ─────────────────────────────────────────── The 0 state is the one most records are in, so it costs one line. */ .cmts[data-n="0"] .cmts-h .ctrl, .cmts[data-n="0"] .cmt-more, .cmts[data-n="0"] .cthread{display:none} .cmts[data-n="0"] .cmts-h .count{display:none} .cmt-none{ padding:13px 2px 0;max-width:60ch; font-size:13.5px;font-weight:500;line-height:1.55;color:var(--text-3); } .cmt-none b{color:var(--text-2);font-weight:700} .nextup .rall{border-top:1px solid var(--line);margin-top:16px;padding:13px 2px} /* --- Stacked panels ------------------------------------------------------ Local addition, not in the design's sheet. The rail held exactly one .panel until the likers block was added, so nothing ever needed to space two of them: .panel carries no margin and .w-rail is a plain block with no gap. Only .adbox had a margin-top, which is why the ad slot looked right and the new panel sat flush against the Record box. 16px, matching .adbox, so the three boxes in the rail are evenly spaced rather than two-tight-then-one-loose. Scoped to a panel following a sibling, so it cannot add a stray margin above the first one. Worth pushing back into modern-watch.css upstream — it is the design's gap rather than this port's. */ .w-rail > .panel + .panel{margin-top:16px} /* The no-JS control rules — cursor, and dropping the disclosure marker — moved to gstash.css. They apply to the bell too, which is chrome on every page, and this sheet is loaded by one. */ .lk-go > summary,.pop > summary,.pnew-d > summary{list-style:none} .lk-go > summary::-webkit-details-marker, .pnew-d > summary::-webkit-details-marker, .pop > summary::-webkit-details-marker{display:none} /* ── the picker, ported without script ──────────────────────────────────── Four local rules, all of them the cost of the design's panel being driven by JavaScript this site does not have. Push them upstream if the sheet ever absorbs a no-JS version. Scoped under .pick, like the whole block above, and that is NOT cosmetic — see the note on the picker section for the collision it repairs. New collection is a
rather than a button toggling `hidden`, so the summary has to carry the row's own layout: .prow is a flex row and a summary is display:list-item, which lays the four parts out in a column. */ .pick .pnew-d > summary.prow{display:flex} /* "Show all" is a link, not a button, because expanding the list is a round trip here. .pmore's padding needs a block box to paint. */ .pick a.pmore{display:inline-block;text-decoration:none} /* The mockup fakes a collection's tiles with coloured blocks; the real ones are images, and the design system has no object-fit anywhere because in the mockup nothing is a photograph. Same rule, same reason, as the one .av already needs. */ .pick .pmini img{width:100%;height:100%;object-fit:cover;display:block} /* Undo is a