/* devless.fun · additions on top of the designer's kit (see overlay/patch.mjs). Nothing here overrides a kit rule except balance. */
h1, h2, h3, h4 { text-wrap: balance; }
.hn a.pv::after, .ft .links a.pv::after { content: "preview"; margin-left: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac2); vertical-align: 1px; }
.watch .ven .k { padding-right: 0; }
.watch .ven .tag { position: absolute; top: 16px; right: 16px; margin: 0; }
.watch .ven .ctas { margin-top: 2px; }
.art h2 .tag { margin-left: auto; }
.art .status { margin-top: 4px; }
.art .rm { display: grid; gap: 6px; }
.dnav .dl.rmk { padding-top: 14px; }
@media (max-width: 720px) { .watch .ven .tag { position: static; justify-self: start; } .dnav .dl.rmk { grid-column: 1 / -1; } }
/* /import */
.imp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.imp-list { display: grid; gap: 12px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--fgl); }
.imp-list b { color: var(--fg); }
.imp-list.plain { list-style: disc; }
.imp-ven { display: grid; gap: 14px; }
.imp-ven p { font-size: 14px; line-height: 1.55; color: var(--fgl); margin-top: 4px; }
.imp-ven .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac2); }
.imp-form form { display: grid; gap: 14px; max-width: 640px; }
.imp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.imp .field .in select, .imp .field .in textarea { flex: 1; width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--fg); background: transparent; border: 0; outline: 0; resize: vertical; }
.imp .field .in select option { background: var(--sf); color: var(--fg); }
.imp .field .in:focus-within { border-color: var(--mu2); }
.imp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.imp .card { min-width: 0; }
@media (max-width: 860px) { .imp-grid, .imp-row { grid-template-columns: minmax(0, 1fr); } }
.hn a.imp-nav { display: none; }
@media (max-width: 720px) { .hr .imp-btn { display: none; } .hn a.imp-nav { display: inline-flex; } }
@media (max-width: 1100px) and (min-width: 721px) { .hr .imp-btn { display: none; } .hn a.imp-nav { display: inline-flex; } }
.imp-list { list-style: decimal; }
.imp-list.plain { list-style: disc; }
.hn a { white-space: nowrap; }
.hr .imp-btn { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1500px) { .hn a { padding-inline: 8px; } }
.imp { grid-template-columns: minmax(0, 1fr); }
.imp .tag { white-space: normal; }
/* Connect X (js/xconnect.js): X voice line on the coin page, the /import card, the /x/connected result */
.xv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.xv .tag { white-space: normal; text-align: left; line-height: 1.3; }
.xv-note { flex-basis: 100%; font-size: 12.5px; color: var(--mu); }
.xv-p { font-size: 14px; line-height: 1.55; color: var(--fgl); }
.xv-dm { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--fg); cursor: pointer; }
.xv-dm input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--ac, #7c8cff); }
.imp-x { margin-top: 16px; max-width: 100%; }
.imp-x .btn[disabled] { white-space: normal; }
.xres-page { max-width: 640px; }
.xres { gap: 12px; }
.xres h1 { font-family: var(--head); font-weight: 800; font-size: clamp(26px, 6vw, 36px); line-height: 1.1; overflow-wrap: anywhere; }
.xres .tag { justify-self: start; }
@media (max-width: 720px) { .xv .btn { flex: 1 1 auto; justify-content: center; } }
/* /seasons */
.sr-wrap { overflow-x: auto; margin-top: 12px; }
.sr-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.sr-t th, .sr-t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, rgba(255,255,255,.1)); white-space: nowrap; }
.sr-t td.mono { font-family: var(--mono); font-size: 12px; }
.sr-pg { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
/* coin page: the buy and sell panel (js/swap.js) in the hero, beside the dev's identity; the demo pages show it disabled */
.dh.has-swap { grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 380px); }
.swp { gap: 12px; padding: 16px; align-self: stretch; --jupiter-plugin-primary: 255, 243, 214; --jupiter-plugin-background: 8, 11, 22; --jupiter-plugin-primary-text: 238, 241, 248; --jupiter-plugin-warning: 245, 184, 74; --jupiter-plugin-interactive: 27, 36, 64; --jupiter-plugin-module: 20, 27, 48; }
.swp .sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swp .sh h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.swp-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.swp-tabs button { justify-content: center; }
.swp-tabs[aria-disabled] button, .swp-tabs button:disabled { opacity: .55; cursor: not-allowed; }
.swp-body { display: grid; min-width: 0; }
.swp[data-state="loading"] .swp-body, .swp[data-state="checking"] .swp-body { min-height: 200px; }
.swp[data-state="ready"] .swp-body { height: 470px; border-radius: var(--r2); overflow: hidden; }
.swp-jup { width: 100%; height: 100%; min-width: 0; }
.swp-load { display: grid; gap: 10px; align-content: start; }
.swp-load .skel { display: block; height: 58px; border-radius: var(--r2); }
.swp-load .skel.short { height: 42px; }
.swp-load small, .swp-row small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.swp-off { display: grid; gap: 8px; }
.swp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t v"; gap: 4px 8px; padding: 12px; background: var(--bg); border: 1px solid var(--ln); border-radius: var(--r2); opacity: .7; }
.swp-row small { grid-area: k; } .swp-row b { grid-area: t; font-size: 15px; } .swp-row span { grid-area: v; color: var(--mu2); font-variant-numeric: tabular-nums; }
.swp-cta { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.swp-cta:disabled { opacity: .75; cursor: not-allowed; }
.swp-note { font-size: 12px; line-height: 1.5; color: var(--mu); margin: 0; }
@media (max-width: 1100px) { .dh.has-swap { grid-template-columns: 220px minmax(0, 1fr); } .dh.has-swap .swp { grid-column: 1 / -1; } }
@media (max-width: 900px) { .dh.has-swap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .swp { padding: 14px; } .swp[data-state="ready"] .swp-body { height: 480px; } }
/* demo pages: the panel sits under the chart */
.dd-mvr .swp { margin-top: 12px; gap: 10px; }
/* dev avatars (js/pfp.js): square, flat pixels, no glow. Sizes follow the kit's .spr sizes. */
.pfp { display: block; flex: none; width: 48px; height: 48px; }
.pfp svg, .pfp img { width: 100%; height: 100%; display: block; filter: none; }
.pfp img { object-fit: cover; border-radius: 4px; background: var(--sf2); }
.spr.pfp { width: 56px; height: 56px; } .spr.pfp svg { filter: none; }
.spr.pfp.xs { width: 28px; height: 28px; } .spr.pfp.sm { width: 42px; height: 42px; } .spr.pfp.md { width: 84px; height: 84px; } .spr.pfp.lg { width: 168px; height: 168px; }
.spr.pfp.dd-big { width: 68px; height: 68px; } .spr.pfp.dd-big svg { filter: none; }
@media (max-width: 720px) { .spr.pfp.lg { width: 120px; height: 120px; } }
.pfp.dd-cav { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.pfp.sr-av { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; }
.dd-av:has(.pfp)::before { display: none; }
@media (max-width: 720px) { .spr.pfp.dd-big { width: 52px; height: 52px; } }
/* home: What is new (overlay/html/whatsnew.html) */
.wn-g { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.wn-c { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); padding: 16px 16px 14px; min-width: 0; }
.wn-k { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.wn-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wn-c li a { display: grid; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; color: var(--fg); }
.wn-c li a:hover { background: var(--sf2); }
.wn-c li b { font-weight: 600; font-size: 14.5px; }
.wn-c li span { font-size: 13px; color: var(--mu); line-height: 1.45; }
.wn-r li a { font-size: 14px; color: var(--fgl); padding: 6px 10px; }
.wn-c .note { margin: 8px 0 0; }
@media (max-width: 980px) { .wn-g { grid-template-columns: 1fr 1fr; } .wn-g .wn-c:first-child { grid-column: 1 / -1; } }
@media (max-width: 620px) { .wn-g { grid-template-columns: 1fr; } }
/* /studio demo videos (overlay/studio/videos.json) */
.stu-v { display: grid; gap: 12px; }
.stu-v h2 { font-family: var(--head); font-size: 20px; }
.stu-vg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.stu-vc { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.stu-vp { position: relative; aspect-ratio: 16 / 9; background: var(--code); }
.stu-vp video, .stu-play, .stu-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stu-play { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.stu-pb { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 10px; background: var(--ac); color: var(--ac-fg); }
.stu-pb svg { width: 20px; height: 20px; }
.stu-play:hover .stu-pb { background: var(--ac-h); }
.stu-dur { position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(5,7,15,.82); color: var(--fg); }
.stu-vt { position: absolute; left: 8px; top: 8px; }
.stu-vb { display: grid; gap: 4px; padding: 12px 14px 14px; }
/* Watching shelf (js/demo/watch-shelf.js): real YouTube videos by people, credited on every card */
.wt-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wt-c { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; display: grid; align-content: start; }
.wt-p { position: relative; aspect-ratio: 16 / 9; background: var(--code); }
.wt-p iframe, .wt-play, .wt-play img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.wt-play { position: relative; padding: 0; background: none; cursor: pointer; }
.wt-pb { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 10px; background: rgba(5,7,15,.82); color: var(--fg); border: 1px solid var(--ln2); }
.wt-pb svg { width: 18px; height: 18px; }
.wt-play:hover .wt-pb { background: var(--ac); color: var(--ac-fg); }
.wt-b { display: grid; gap: 3px; padding: 11px 13px 13px; }
.wt-b b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.wt-b small { font-size: 12.5px; color: var(--fgl); }
.wt-dev { font-size: 12px; color: var(--mu); }
.wt-attr { font-family: var(--mono); font-size: 10.5px; color: var(--mu); letter-spacing: .02em; margin-top: 4px; }
.wt .sh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wt-th { margin: 0 0 12px; font-size: 13.5px; }
.wt-note { margin-top: 12px; }
.stu-w { display: grid; gap: 12px; } .stu-w h2 { font-family: var(--head); font-size: 20px; } .stu-w .sub { font-size: 14px; max-width: 72ch; }