/** * VIEWING TIMES — the seller's form (v2 mockup, Leon 21 Sep 2026) + the buyer's box. * * v2 splits days from hours and reframes the preview as a PAGE. The measurements below are the mockup's * table of tokens; the colours are the canonical --pt-* ones, never the mockup's ASSUMED values. */ .pt-vt { margin: 0; } /* Blocks 1–3 share borders and read as one thing. */ .pt-vt-block { background: var(--pt-surface); border: 1px solid var(--pt-border); padding: 22px 24px; } .pt-vt-block + .pt-vt-block { border-top: 0; } /* The last decision changes OTHER listings, so it is detached rather than stacked — which means it needs its top border BACK. `.pt-vt-block + .pt-vt-block { border-top: 0 }` above is (0,2,0) and was beating a lone class, so the block sat there with three sides (Leon, C3). */ .pt-vt-block--apart { margin-top: 20px; } .pt-vt-block + .pt-vt-block.pt-vt-block--apart { border-top: 1px solid var(--pt-border); } /* A step number says "you set this". The preview has an eye and no number — the difference has to be visible before a word is read, which is the whole fix in v2. */ .pt-vt-head { display: flex; gap: 12px; align-items: baseline; margin: 0 0 4px; } .pt-vt-step { font-size: 12px; color: var(--pt-ink-3); width: 18px; flex: none; } .pt-vt-eye { width: 16px; height: 16px; flex: none; color: var(--pt-ink-2); align-self: center; } .pt-vt-title { font-size: 15px; font-weight: 600; margin: 0; } .pt-vt-sub { font-size: 13px; color: var(--pt-ink-3); margin: 0 0 16px 30px; } .pt-vt-head.is-preview + .pt-vt-sub { margin-left: 28px; } .pt-vt-body { margin-left: 30px; } /* ── 1 · days ── */ .pt-vt-opts { display: flex; flex-direction: column; } .pt-vt-opt { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--pt-border); background: var(--pt-surface); margin-top: -1px; position: relative; cursor: pointer; } .pt-vt-opt:first-child { margin-top: 0; } .pt-vt-opt.is-on { border-color: var(--pt-ink); z-index: 1; } .pt-vt-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-vt-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--pt-border-strong); flex: none; position: relative; } .pt-vt-opt.is-on .pt-vt-radio { border-color: var(--pt-ink); } .pt-vt-opt.is-on .pt-vt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pt-ink); } .pt-vt-opt input:focus-visible + .pt-vt-radio { outline: 2px solid var(--pt-ink); outline-offset: 2px; } .pt-vt-opt__label { flex: 1; font-size: 14px; font-weight: 500; } .pt-vt-opt__when { font-size: 12.5px; color: var(--pt-ink-3); text-align: right; } .pt-vt-or { font-size: 12px; color: var(--pt-ink-3); margin: 16px 0 8px; } /* ── 2 · hours ── */ .pt-vt-hrow { display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--pt-border); } .pt-vt-hrow:first-child { border-top: 0; padding-top: 0; } .pt-vt-hname { font-size: 14px; font-weight: 500; } .pt-vt-hname small { display: block; font-size: 12px; font-weight: 400; color: var(--pt-ink-3); } .pt-vt-hrow.is-off .pt-vt-hname { color: var(--pt-ink-3); } .pt-vt-range { display: flex; align-items: center; gap: 10px; } .pt-vt-time { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--pt-border-strong); background: var(--pt-surface); font-size: 14px; min-width: 84px; border-radius: 0; color: var(--pt-ink); } .pt-vt-time:focus-visible { outline: 2px solid var(--pt-ink); outline-offset: 1px; } .pt-vt-to { font-size: 13px; color: var(--pt-ink-3); } /* An off row says so in WORDS. An empty gap reads as a bug. */ .pt-vt-closed { font-size: 13px; color: var(--pt-ink-3); } .pt-vt-hnote { font-size: 12.5px; color: var(--pt-ink-3); text-align: right; } /* day by day */ .pt-vt-drow { display: grid; grid-template-columns: 52px 44px 1fr; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--pt-border); } .pt-vt-drow:first-child { border-top: 0; padding-top: 0; } .pt-vt-dname { font-size: 14px; font-weight: 500; } .pt-vt-drow.is-off .pt-vt-dname { color: var(--pt-ink-3); } .pt-vt-sw { width: 32px; height: 18px; background: var(--pt-border-strong); position: relative; flex: none; cursor: pointer; display: block; } .pt-vt-sw span[aria-hidden] { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--pt-surface); transition: left .12s ease; } .pt-vt-sw.is-on { background: var(--pt-ink); } .pt-vt-sw.is-on span[aria-hidden] { left: auto; right: 3px; } .pt-vt-sw input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-vt-sw input:focus-visible ~ span[aria-hidden] { outline: 2px solid var(--pt-ink); outline-offset: 2px; } .pt-vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pt-vt-copy { display: inline-block; margin-top: 14px; font: inherit; font-size: 13px; color: var(--pt-accent); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } .pt-vt-copy:hover { text-decoration: underline; } /* ── 3 · notice ── */ .pt-vt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pt-vt-field__lbl { font-size: 13px; font-weight: 500; margin: 0 0 8px; } .pt-vt-seg { display: flex; } /* C1 (Leon, 21 Sep): two options looked selected in each control. The server renders exactly ONE `is-on` — checked — so this was never the markup. It is a theme rule reaching a bare `label` at a specificity a lone class cannot beat, so the UNSELECTED buttons were inheriting a dark fill. The fix is both halves: scope to `.pt-vt` so ours wins, and state the resting look EXPLICITLY rather than relying on "no rule means default" — an unstyled state is not a state, it is whatever the page says. [[reference-css-specificity-theme-override]] */ .pt-vt .pt-vt-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 38px; font-size: 13px; font-weight: 400; background: var(--pt-surface); background-image: none; border: 1px solid var(--pt-border-strong); border-radius: 0; box-shadow: none; margin-left: -1px; color: var(--pt-ink); padding: 0 8px; cursor: pointer; position: relative; text-transform: none; letter-spacing: 0; } .pt-vt .pt-vt-seg__btn:first-child { margin-left: 0; } /* Only the checked one fills. Driven by the real input as well as the class, so a JS hiccup cannot leave two looking chosen — the radio itself is the source of truth. */ .pt-vt .pt-vt-seg__btn.is-on, .pt-vt .pt-vt-seg__btn:has(input:checked) { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--pt-on-primary); z-index: 1; } .pt-vt .pt-vt-seg__btn:not(.is-on):not(:has(input:checked)):hover { background: var(--pt-fill-control); } .pt-vt-seg__btn input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-vt-seg__btn input:focus-visible + span { outline: 2px solid var(--pt-ink); outline-offset: 3px; } /* ── the preview, framed as a page ── A stronger border than the blocks so it reads as an OBJECT inside the block, and nothing in it responds. */ .pt-vt-page { border: 1px solid var(--pt-border-strong); background: var(--pt-surface); } .pt-vt-page__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--pt-border); font-size: 11px; color: var(--pt-ink-3); } .pt-vt-page__bar b { font-size: 11px; font-weight: 600; color: var(--pt-ink-2); letter-spacing: .02em; } .pt-vt-page__body { padding: 18px 20px 20px; pointer-events: none; user-select: none; } /* Their own listing, faded: it says "this is your page" without competing with the box below it. */ .pt-vt-ghost { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--pt-border); opacity: .55; } .pt-vt-ghost p { margin: 0; font-size: 14px; font-weight: 600; } .pt-vt-ghost span { font-size: 14px; } /* Inside the page frame the buyer's box is the page's own content, not a card sitting on it: one container max. [[feedback-flat-beats-nested]] The frame's aria-label already tells assistive tech it is a preview, so the box's own "preview only" sentence is kept for screen readers and taken out of the picture. */ .pt-vt-page__body .pt-vb { border: 0; background: transparent; padding: 0; } .pt-vt-page__body .pt-vb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── how it works ── */ .pt-vt-how { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; } .pt-vt-how li { counter-increment: s; display: flex; gap: 12px; font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--pt-border); } .pt-vt-how li:first-child { border-top: 0; } .pt-vt-how li::before { content: counter(s); font-family: var(--pt-mono); font-size: 12px; color: var(--pt-ink-3); width: 14px; flex: none; padding-top: 1px; } /* ── all my listings ── */ .pt-vt-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .pt-vt-check input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-vt-box { width: 18px; height: 18px; border: 1.5px solid var(--pt-border-strong); background: var(--pt-surface); flex: none; margin-top: 2px; position: relative; } .pt-vt-check input:checked + .pt-vt-box { background: var(--pt-ink); border-color: var(--pt-ink); } .pt-vt-check input:checked + .pt-vt-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--pt-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); } .pt-vt-check input:focus-visible + .pt-vt-box { outline: 2px solid var(--pt-ink); outline-offset: 2px; } .pt-vt-check__text { display: block; } .pt-vt-check__t { display: block; font-size: 14px; font-weight: 500; } .pt-vt-check__s { display: block; font-size: 13px; color: var(--pt-ink-3); margin: 3px 0 0; } .pt-vt-affected { margin: 14px 0 0 30px; } .pt-vt-affected > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--pt-border); font-size: 13px; } .pt-vt-affected > div span:last-child { font-size: 12px; color: var(--pt-ink-3); } @media (max-width: 640px) { .pt-vt-block { padding: 18px 16px; } /* The preview's sub-line has its own indent rule above, which is more specific than this one — it has to be named here or it keeps a 28px indent nothing else has. */ .pt-vt-sub, .pt-vt-body, .pt-vt-affected, .pt-vt-head.is-preview + .pt-vt-sub { margin-left: 0; } .pt-vt-hrow { grid-template-columns: 1fr; } .pt-vt-hname small { display: inline; margin-left: 6px; } .pt-vt-hnote { text-align: left; } .pt-vt-drow { grid-template-columns: 44px 40px 1fr; } .pt-vt-pair { grid-template-columns: 1fr; gap: 16px; } .pt-vt-time { min-width: 0; flex: 1; } } /* ─────────────────────────── the buyer's viewing box ─────────────────────────── ONE component, rendered on the listing page for real and in the form as a preview. */ .pt-vb { background: var(--pt-surface); border: 1px solid var(--pt-border); padding: 16px 18px; } .pt-vb__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; } .pt-vb__head strong { font-size: 14px; color: var(--pt-ink); } .pt-vb__head span { font-size: 12.5px; color: var(--pt-ink-3); } .pt-vb__days { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; } .pt-vb__day { border: 1px solid var(--pt-border-strong); padding: 6px 10px; text-align: center; min-width: 58px; } .pt-vb__day b { display: block; font-size: 12px; font-weight: 500; } .pt-vb__day i { display: block; font-style: normal; font-size: 12px; color: var(--pt-ink-3); } .pt-vb__day.is-on { border-color: var(--pt-ink); background: var(--pt-ink); color: var(--pt-on-primary); } .pt-vb__day.is-on i { color: #D8D6CF; } /* Every free day's hours are in the page; only the chosen day's group is shown, so switching is instant. */ .pt-vb__slots { display: none; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; } .pt-vb__slots.is-on { display: flex; } .pt-vb__slot { border: 1px solid var(--pt-border-strong); padding: 6px 12px; font-size: 13px; color: var(--pt-ink); } .pt-vb__foot { font-size: 12.5px; color: var(--pt-ink-3); margin: 0 0 12px; } .pt-vb__btn { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; padding: 10px 18px; border: 1px solid var(--pt-ink); background: var(--pt-ink); color: var(--pt-on-primary); } /* A preview is not a control. Nothing in it responds, and the sentence below says so out loud. */ .pt-vb.is-preview { pointer-events: none; } /* ── LIVE ON A LISTING ── The day chips and hours are real