/* Closo Direct — THE BUYER ACCOUNT's own sheet, `shop.closo.co/account/*`. Stream D of the buyer-account wave. Linked as /css/shop-account.css?v=N by `modules/shop/views/account/_chrome.php`, which every account screen renders and nothing else does. ═══════════════════════════════════════════════════════════════════════════ ⛔ WHY THIS IS A SECOND FILE AND NOT AN APPEND TO shop-storefront.css ═══════════════════════════════════════════════════════════════════════════ §10 of the architect spec says «the `ac-` block APPENDED to shop-storefront.css», and that is where it was written first. It MEASURED RED, on a clause that exists for exactly this: DirectStorefrontCssContractTest C-08b — the storefront sheet must fit inside the initial congestion window (IW10, 14,600 bytes gzipped) so it arrives in ONE round trip before first paint. before the append 14,511 gz (89 bytes of headroom) after the append 17,375 gz (119.5% of the window) The append would have cost a second round trip before first paint on EVERY storefront and EVERY product page — the surface whose whole traffic source is a phone opening an Instagram-bio link — to carry rules that only seven account screens use. That is the trade C-08b was written to refuse, and the action it prescribes is «move the bytes», not «raise the ceiling». So the account pays for its own paint: one extra request, on a page that is already `no-store` and already behind a sign-in, and the storefront sheet goes back to byte-identical. The `ac-` prefix and the append-only discipline survive the move whole — this file holds nothing else, so a sibling wave's edit to the storefront sheet still cannot conflict with it. ⚠️ IT IS ADDITIVE, NOT STANDALONE. Every token below (`--accent`, `--edge`, `--f1`…`--f6`, `--fm`, the eight §34 tint/ink pairs) is declared in `shop-storefront.css`'s `:root`, and the layout links that sheet on every page including these. This file declares NO token and no reset; it would render unstyled on its own, and that is deliberate — one palette, one declaration, so a rebrand moves both surfaces. ⛔ NO DARK BLOCK. The storefront is LIGHT ONLY on prod (operator 2026-08-09); clause S38-01 refuses a dark token block in the shared sheet and this surface inherits the decision rather than reopening it. TOUCH TARGETS: every control declares `min-height:44px` (`.ac-btn`, `.ac-lnk`, `.ac-back`, `.ac-jump`) — Apple HIG / WCAG 2.5.5, the floor `.btn` and `.chip` hold in the shared sheet. The focus ring is that sheet's own `:focus-visible` rule and is not restated here. ⚠️ NOTHING TO BUMP. `_chrome.php` derives this sheet's `?v=` from these very bytes (`services/DirectAssetPin.php`), so an edit here moves the pin with no human in the loop — which matters because `web/.htaccess` caches versioned static assets for a year. The `/css/` prefix already reaches Apache on shop.closo.co through the nginx canon (`scripts/admin-deploy/nginx/shop-storefront-location.conf`, `location ^~ /css/`), so a new file under it needs no vhost change. ═══════════════════════════════════════════════════════════════════════════ */ .ac-page{max-width:560px;margin:0 auto;padding:18px 16px 56px; display:flex;flex-direction:column;gap:18px} .ac-i{width:14px;height:14px;flex:0 0 auto} .ac-mono{font-family:var(--fm);font-variant-numeric:tabular-nums} /* ── platform chrome (§2): Closo's wordmark, never a seller's header ──────── */ .ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px; padding-bottom:13px;border-bottom:1px solid var(--line)} .ac-mark{display:flex;align-items:center;gap:7px;font-weight:700; font-size:var(--f4);letter-spacing:-.02em} .ac-mark-t{width:22px;height:22px;border-radius:6px;background:var(--accent); color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:700} .ac-back{display:inline-flex;align-items:center;justify-content:center;gap:5px; min-height:44px;padding:6px 4px;font-size:var(--f3);font-weight:600; color:var(--accent);border:0;border-radius:999px;background:none} /* The chip lost its outline (operator 2026-08-10), so it needs the feedback the outline used to give. Underline is the storefront's own idiom for a borderless link (`.back:hover` there); the tint is what makes a 44px target feel like a target. Inside `hover:hover` so a tap does not leave it stuck painted on a touch screen — the same guard the storefront wraps its own hovers in. Until now this sheet carried NO hover rule at all. */ /* ═══════════════════════════════════════════════════════════════════════════ HOVER, ACROSS THE WHOLE CABINET AND NOT ONE ELEMENT AT A TIME. ═══════════════════════════════════════════════════════════════════════════ This sheet shipped with NO hover rule at all. It was found one control at a time — the Back chip, then «View shop», then «Browse Ivan's Store», then the three jump rows — which is the shape of a gap, not of four bugs. So the pass is over the interactive CLASSES, and anything added later that reuses one of them inherits the feedback instead of being reported next week. The idioms are the storefront's own, not new ones: · a bordered box → `border-color:var(--fg)` + the single `--shadow`, exactly what `.card:hover` does over there; · a bare text link → underline, exactly what `.back:hover` does; · a filled button → `opacity:.88`, exactly what `.btn-primary:hover` does. All of it inside `@media (hover:hover)`: on a touch screen `:hover` sticks after the tap and leaves a row painted as though it were selected. The storefront wraps its own hovers the same way. `:active` is outside, because a press should answer on every device. */ @media (hover:hover){ .ac-back:hover{background:var(--card);text-decoration:underline;text-underline-offset:3px} /* Bordered boxes that are links: the three jump rows and the shop/order rows. */ .ac-jump:hover,.ac-row:hover{border-color:var(--fg);box-shadow:var(--shadow)} .ac-jump:hover .ac-jump-t{text-decoration:underline;text-underline-offset:3px} /* Bare text links — «Browse Ivan's Store», the in-page links. */ .ac-lnk:hover{text-decoration:underline;text-underline-offset:3px;color:var(--accent)} /* ⛔ `.ac-shop-go` («View shop») and `.ac-item` (an order row) are ANCHORS that carry neither `.ac-lnk` nor `.ac-btn`, so the class-wide pass missed them and the operator found them one at a time — the second time that has happened on this sheet. The sweep below is over every interactive class in `views/account/*`, not over the ones I remembered. */ .ac-shop-go:hover{text-decoration:underline;text-underline-offset:3px;color:var(--accent)} .ac-shop-go:hover .ac-i{transform:translateX(2px)} .ac-item:hover{border-color:var(--fg);box-shadow:var(--shadow)} /* Buttons: outline ones take the border AND a ground, the filled one takes opacity. ⚠️ The border alone was not enough — `--edge` to `--fg` on a small outline button is a real change and an easy one to miss, and the operator missed it on «Back to your account». H-1 proves a hover RULE exists; it cannot prove the rule is PERCEPTIBLE, and that difference is why this line changed rather than the clause. */ /* ⛔ `:not(.ac-btn-p)` IS LOAD-BEARING. Both rules are (0,2,0), the primary's comes later and declares `opacity` and `border-color` but NOT `background` — so the ground below leaked onto the filled button and turned it near- white with white text on hover. Reported live. A shared hover that a variant only PARTLY overrides is a collision waiting for whichever property the variant forgot. */ .ac-btn:not(.ac-btn-p):hover{border-color:var(--fg);background:var(--card)} .ac-btn-p:hover{opacity:.88;border-color:transparent} } .ac-jump:active,.ac-row:active,.ac-item:active{background:var(--card)} .ac-shop-go .ac-i{transition:transform .15s ease} .ac-btn:active{opacity:.9} .ac-back:active{background:var(--tint)} .ac-back-in{align-self:flex-start} /* ── the identity line. The ONLY personal byte on this realm, and only because every account exit is `no-store` (archtest A-8). ────────────── */ .ac-id{display:flex;flex-direction:column;gap:7px} .ac-id-em{font-size:var(--f5);font-weight:700;letter-spacing:-.02em;word-break:break-all} .ac-id-sub{font-size:var(--f3);color:var(--muted);line-height:1.5} .ac-id-acts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:2px} .ac-inline{display:inline;margin:0} .ac-lnk{display:inline-flex;align-items:center;min-height:44px;background:none; border:0;padding:0;font:inherit;font-size:var(--f3);font-weight:600; color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .ac-lnk-q{color:var(--muted)} /* ── sections ─────────────────────────────────────────────────────────────── */ .ac-sec{display:flex;flex-direction:column;gap:11px} .ac-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .ac-sec-t{margin:0;font-size:var(--f4);font-weight:700;letter-spacing:-.015em} .ac-sec-n{font-family:var(--fm);font-size:var(--f2);color:var(--muted)} .ac-h1{margin:0;font-size:var(--f5);font-weight:700;letter-spacing:-.02em;line-height:1.3} /* ── a row: the SELLER's identity lives here, not in the chrome (§2) ─────── */ .ac-row{display:flex;flex-direction:column;gap:10px;border:1px solid var(--edge); border-radius:14px;padding:12px;background:var(--bg)} .ac-shop{display:flex;align-items:center;gap:8px;font-size:var(--f3);font-weight:600} .ac-shop-big{font-size:var(--f4)} .ac-shop-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-shop-go{display:inline-flex;align-items:center;gap:4px;margin-left:auto; flex:0 0 auto;color:var(--muted);font-weight:500;font-size:var(--f2)} /* The monogram wears a PLATFORM pair, never a colour invented for a seller. All five are §34 tint/ink pairs whose 4.5:1 is pinned by C-04d. */ .ac-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid; place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.02em} .ac-shop-big .ac-av{width:28px;height:28px;font-size:12px} .ac-av-accent{background:var(--tint);color:var(--accent)} .ac-av-teal{background:var(--teal-tint);color:var(--teal)} .ac-av-ocean{background:var(--ocean-tint);color:var(--ocean)} .ac-av-rose{background:var(--rose-tint);color:var(--rose)} .ac-av-sand{background:var(--sand-tint);color:var(--sand)} .ac-item{display:block} .ac-item-b{display:flex;flex-direction:column;gap:3px;min-width:0} .ac-item-t{font-size:var(--f3);font-weight:600;line-height:1.35} .ac-item-p{font-family:var(--fm);font-size:var(--f3);font-weight:600} .ac-item-w{margin:0;font-size:var(--f2);color:var(--muted)} .ac-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding-top:9px;border-top:1px solid var(--line)} .ac-state-d{font-size:var(--f2);color:var(--muted)} /* Chips are STATUS, not controls — no 44px floor and no boundary, because nothing here is tappable. `.chip` above is the tappable filter pill and this is deliberately not it. */ .ac-chip{display:inline-flex;align-items:center;border-radius:999px; padding:3px 10px;font-size:var(--f2);font-weight:700;letter-spacing:.01em} .ac-chip-warn{background:var(--warn-tint);color:var(--warn)} .ac-chip-ocean{background:var(--ocean-tint);color:var(--ocean)} .ac-chip-ok{background:var(--ok-tint);color:var(--ok)} .ac-chip-err{background:var(--err-tint);color:var(--err)} .ac-chip-rose{background:var(--rose-tint);color:var(--rose)} /* ── empty states. The state EVERY buyer is in today, so it is designed rather than defaulted. ─────────────────────────────────────────────── */ .ac-empty{border:1px dashed var(--edge);border-radius:14px;padding:20px 16px; display:flex;flex-direction:column;gap:6px;background:var(--card)} .ac-empty b{font-size:var(--f4)} .ac-empty span{font-size:var(--f3);color:var(--muted);line-height:1.5} .ac-mini{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line); border-radius:12px;padding:11px 12px;background:var(--card)} .ac-mini-b{display:flex;flex-direction:column;gap:3px;min-width:0} .ac-mini-t{font-size:var(--f3);font-weight:600} .ac-mini-t a{text-decoration:underline;text-underline-offset:3px} .ac-mini-s{font-size:var(--f2);color:var(--muted);line-height:1.5} .ac-mini-a{margin-left:auto;font-family:var(--fm);font-size:var(--f4);font-weight:700} .ac-jump{display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:44px;border:1px solid var(--edge);border-radius:12px; padding:12px 14px;background:var(--bg)} .ac-jump-t{font-size:var(--f3);font-weight:600} .ac-jump-n{display:inline-flex;align-items:center;gap:6px; font-family:var(--fm);font-size:var(--f2);color:var(--muted)} /* ── purchase detail ──────────────────────────────────────────────────────── */ .ac-money{display:flex;flex-direction:column;border:1px solid var(--line); border-radius:12px;overflow:hidden} .ac-money div{display:flex;justify-content:space-between;gap:12px; padding:10px 13px;font-size:var(--f3);border-bottom:1px solid var(--line)} .ac-money div:last-child{border-bottom:0;background:var(--card);font-weight:700} .ac-help{background:var(--tint);border-radius:12px;padding:13px 14px; display:flex;flex-direction:column;gap:9px;align-items:flex-start} .ac-help p{margin:0;font-size:var(--f3);line-height:1.55} .ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;border-radius:10px;padding:11px 15px;font:inherit; font-size:var(--f3);font-weight:700;border:1px solid var(--edge); background:var(--bg);color:var(--fg);cursor:pointer} .ac-btn-p{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .ac-btn-sm{padding:7px 12px;font-size:var(--f2);border-radius:9px} /* ── following + preferences ──────────────────────────────────────────────── */ .ac-fol,.ac-pf{border:1px solid var(--edge);border-radius:14px;padding:13px; display:flex;flex-direction:column;gap:11px;background:var(--bg)} .ac-fol-none{margin:0;font-size:var(--f3);color:var(--muted);line-height:1.55} .ac-fol-f{display:flex;align-items:center;justify-content:space-between;gap:10px; padding-top:10px;border-top:1px solid var(--line)} .ac-fol-since{font-size:var(--f2);color:var(--muted)} .ac-prefs{display:flex;flex-direction:column;gap:8px} .ac-pref-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .ac-pref-l{font-size:var(--f1);font-weight:700;color:var(--muted); text-transform:uppercase;letter-spacing:.08em;font-family:var(--fm);flex:0 0 auto} .ac-tag{border:1px solid var(--line);background:var(--card);border-radius:999px; padding:3px 9px;font-size:var(--f2);font-weight:600} .ac-pf-h{display:flex;flex-direction:column;gap:4px} .ac-pf-h b{font-size:var(--f4)} .ac-pf-sub{font-size:var(--f3);color:var(--muted);line-height:1.5} .ac-pf-note{margin:0;font-size:var(--f2);color:var(--muted);line-height:1.55} /* ── correspondence: an OUTBOX, and the standing line is part of the design rather than fine print (product §11.3) ─────────────────────────────── */ .ac-msg{border:1px solid var(--edge);border-radius:14px;padding:12px; display:flex;flex-direction:column;gap:9px;background:var(--bg)} .ac-msg-it{margin:0;font-size:var(--f2);color:var(--muted);font-style:italic; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-msg-q{margin:0;font-size:var(--f3);line-height:1.55;padding:10px 12px; background:var(--card);border-radius:10px;border:1px solid var(--line); overflow-wrap:anywhere} .ac-msg-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding-top:9px;border-top:1px solid var(--line)} .ac-msg-a{display:flex;gap:9px;flex-wrap:wrap} .ac-standing{margin:0;background:var(--tint);border-radius:12px;padding:13px 14px; font-size:var(--f3);line-height:1.55;overflow-wrap:anywhere} /* ── the dual-role door (A-11). Dashed = the invitation state, which is the one line that is true for all three states. ────────────────────────── */ .ac-door{display:flex;flex-direction:column;gap:4px;padding:12px 13px; border:1px solid var(--line);border-radius:12px;background:var(--card)} .ac-door-invite{border-style:dashed;border-color:var(--edge)} .ac-door-t{font-size:var(--f3);font-weight:600} .ac-door .ac-lnk{align-self:flex-start} /* ── notices + the legal foot ─────────────────────────────────────────────── */ .ac-note{margin:0;border-radius:12px;padding:11px 13px;font-size:var(--f3); line-height:1.55} .ac-note-warn{background:var(--warn-tint);color:var(--warn)} .ac-note-ok{background:var(--ok-tint);color:var(--ok)} .ac-note-err{background:var(--err-tint);color:var(--err)} .ac-note-q{background:var(--card);color:var(--muted);border:1px solid var(--line)} .ac-legal{display:flex;flex-direction:column;gap:9px;padding-top:16px; border-top:1px solid var(--line)} .ac-legal-h{font-size:var(--f2);font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);font-family:var(--fm)} /* ── the signed-out page. The shared `.dv` card is mounted whole; only its surroundings are declared here, because a second copy of the login idiom is exactly what `_verify.php` exists to prevent. ─────────────── */ .ac-signin{display:flex;flex-direction:column;gap:14px;align-items:center} .ac-signin .dv{margin:0 auto;width:100%} .ac-signin-lead{margin:0;font-size:var(--f3);color:var(--muted);line-height:1.55; text-align:center;max-width:44ch} @media (min-width:640px){.ac-page{padding:26px 20px 72px}} .ac-fol-global{margin:0;font-size:var(--f2);color:var(--muted);line-height:1.55} .ac-fol-global .ac-lnk{min-height:0;font-size:var(--f2)} .ac-empty .ac-btn{align-self:flex-start;margin-top:4px} /* ═══════════════════════════════════════════════════════════════════════════ «TELL THIS SHOP WHAT YOU ARE AFTER» — the approved onboarding mockup's language, applied to a
sheet (operator 2026-08-10). ═══════════════════════════════════════════════════════════════════════════ What is BORROWED from the mockup: the square-ish cards, the selected state as tint + accent border rather than a solid fill, the section headings, the quiet note above the button. What is NOT: the icons. Those are drawn against the fixed 33 platform slugs; this sheet's words are the quiz's own vocabulary — «One size», «XXL» — and inventing a glyph for a size would be decoration pretending to be meaning. When the taxonomy from the ТЗ lands, its categories bring their icons with them and this grid takes them without changing shape. */ .ac-tell{margin-top:2px} .ac-tell>summary{list-style:none;cursor:pointer} .ac-tell>summary::-webkit-details-marker{display:none} .ac-tell-f{margin-top:12px;padding:14px;border:1px solid var(--edge);border-radius:14px; background:var(--bg);display:flex;flex-direction:column;gap:10px} .ac-tell-h{margin:2px 0 0;font-size:var(--f2);font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--muted)} .ac-tell-g{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))} /* The checkbox itself is the state; it is hidden from sight, never from assistive tech or the keyboard — `display:none` would take it off the tab order and out of the accessibility tree, which is how a "custom checkbox" becomes unusable without a mouse. */ .ac-tell-c input{position:absolute;opacity:0;width:1px;height:1px} .ac-tell-c{display:flex;align-items:center;justify-content:center;text-align:center; min-height:44px;padding:9px 8px;border:1px solid var(--edge);border-radius:12px; background:var(--bg);cursor:pointer;font-size:var(--f2);font-weight:500; transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease} .ac-tell-c:has(input:checked){background:var(--tint);border-color:var(--accent);font-weight:600} .ac-tell-c:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px} .ac-tell-n{margin:2px 0 0;font-size:var(--f2);color:var(--muted)} @media (hover:hover){ .ac-tell-c:hover{border-color:var(--fg);box-shadow:var(--shadow)} .ac-tell>summary:hover{border-color:var(--fg)} } /* ═══════════════════════════════════════════════════════════════════════════ «WHAT YOU ARE AFTER» — the approved mockup's sheet (artifact d73dbea8). ═══════════════════════════════════════════════════════════════════════════ Shaped after `.lg-pop`, the storefront's own popup: white sheet, 1px --edge, radius 14, the single --shadow, over a flat 45% dim with NO blur. The shop dims and does not blur, and one blurred ground makes every other overlay look unfinished beside it. ⛔ THE `[hidden]` OVERRIDES ARE LOAD-BEARING. `hidden` hides only through the browser's `[hidden]{display:none}` at specificity (0,1,0); every class below that sets `display` beats it. That is exactly how two «Continue with Google» buttons ended up on screen at once this morning. */ .ac-int[hidden],.ac-intbtn[hidden],.ac-int-g[hidden], .ac-int-foot [hidden]{display:none} .ac-intbtn{align-self:flex-start} .ac-int{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; padding:24px 16px} .ac-int-scrim{position:absolute;inset:0;background:rgba(26,32,44,.45)} .ac-int-sheet{position:relative;z-index:1;background:var(--bg);border:1px solid var(--edge); border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:680px;max-height:min(88vh,620px); display:flex;flex-direction:column;overflow:hidden;animation:ac-rise .22s ease both} @keyframes ac-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .ac-int-head{padding:20px 20px 14px;border-bottom:1px solid var(--line)} .ac-int-steps{display:flex;align-items:center;gap:10px;margin-bottom:14px} .ac-int-track{display:flex;gap:5px;flex:1} .ac-int-track i{height:4px;flex:1;border-radius:999px;background:var(--line); transition:background-color .15s ease} .ac-int-track i.on{background:var(--accent)} .ac-int-steps em{font:700 var(--f1)/1 "Inter";letter-spacing:.07em;text-transform:uppercase; color:var(--muted);font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums} .ac-int-t{margin:0;font-size:var(--f6);font-weight:700;line-height:1.2} .ac-int-sub{margin:6px 0 0;font-size:var(--f3);color:var(--muted)} .ac-int-scroll{padding:14px 20px 18px;overflow-y:auto;flex:1} .ac-int-g{display:grid;gap:10px;grid-auto-rows:1fr; grid-template-columns:repeat(auto-fill,minmax(112px,1fr))} .ac-int-g-sm{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} /* Visually hidden, never `display:none`: that would take the control out of the tab order and the accessibility tree, which is how a "custom card" becomes unusable without a mouse. */ .ac-int-c input{position:absolute;opacity:0;width:1px;height:1px} .ac-int-c{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:9px;aspect-ratio:1/1;min-height:44px;padding:14px 8px 12px; border:1px solid var(--edge);border-radius:14px;background:var(--bg);cursor:pointer; text-align:center;font:500 var(--f2)/1.28 "Inter"; transition:box-shadow .15s ease,border-color .15s ease,background-color .15s ease} .ac-int-c-sm{aspect-ratio:auto;padding:11px 8px;font-size:var(--f3)} .ac-int-i{width:34px;height:34px;color:var(--muted);flex:none;transition:color .15s ease} /* Selected: tint + accent border and a tick, the storefront's own multi-select mark (`.sortlist .chip.on`), drawn from two borders exactly as it draws it. */ .ac-int-c:has(input:checked){background:var(--tint);border-color:var(--accent);font-weight:600} .ac-int-c:has(input:checked) .ac-int-i{color:var(--accent)} .ac-int-c:has(input:checked)::after{content:"";position:absolute;top:9px;right:9px; width:8px;height:13px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(45deg)} .ac-int-c:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px} @media (hover:hover){.ac-int-c:hover{box-shadow:var(--shadow);border-color:var(--fg)} .ac-int-c:hover .ac-int-i{color:var(--fg)}} .ac-int-foot{padding:14px 20px 18px;border-top:1px solid var(--line);background:var(--bg); display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ac-int-n{font-size:var(--f3);color:var(--muted);margin-right:auto; font-variant-numeric:tabular-nums} @media (max-width:520px){ .ac-int{padding:12px 10px} .ac-int-head{padding:16px 14px 12px} .ac-int-scroll{padding:12px 14px 14px} .ac-int-foot{padding:12px 14px 14px} .ac-int-t{font-size:var(--f5)} } /* The per-root sections of step 2 (operator 2026-08-10). Two grids on one screen need a heading each, or a buyer who picked Women's and Men's Fashion sees two identical lists of clothes and cannot tell which is which. */ .ac-int-sec+.ac-int-sec{margin-top:16px} .ac-int-h{margin:0 0 8px;font-size:var(--f3);color:var(--muted)} .ac-int-h b{color:var(--fg);font-weight:700} .ac-int-reset{margin-right:auto} /* Four of a followed shop's newest items (operator 2026-08-10). A strip, not a grid: it is a reminder of what is in there, not a second catalogue, and it must never compete with the card's own words. Scrolls sideways on a narrow screen rather than wrapping into a block that pushes «Following since» off the fold. */ .ac-fol-items{list-style:none;display:flex;gap:8px;margin:10px 0 0;padding:0; overflow-x:auto;scrollbar-width:none} .ac-fol-items::-webkit-scrollbar{display:none} .ac-fol-items li{flex:0 0 auto} .ac-fol-item{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line); background:var(--card);transition:border-color .15s ease,box-shadow .15s ease} .ac-fol-item img{display:block;width:96px;height:120px;object-fit:cover} @media (hover:hover){.ac-fol-item:hover{border-color:var(--fg);box-shadow:var(--shadow)}} .ac-fol-item:active{border-color:var(--fg)} /* ── THE CABINET'S TAB ROW (§40 W1, product-lead decision 2026-08-13). ──────── Rendered by `views/account/_tabs.php` on the four list-rank screens: `index` (as «Orders»), `saved`, `following`, `messages`. Ported from the mockup's `.acc-tabs` (`closo-direct-bag-saved-mockup-v1.html` :359-362) under THIS SHEET's `ac-` prefix, which the file header above calls a discipline that «survives the move whole» — `acc-tabs` would have been the only double-c class in the cabinet. ⛔ ONE ROW, NO WRAP, NO SCROLL AFFORDANCE — and that is measured, not hoped. At `--f3` the four words plus padding, gaps and container margins come to ~324px against 393px, ~70px of slack; the all-bold pathological case is ~334px. `overflow-x:auto` is INSURANCE ONLY (a future fifth tab, a large text setting) — it must not become the layout's plan. No chevrons. The touch target is carried by `min-height:44px` on the anchor, not by the text box: at `--f3` the words are ~18px tall, so without it every tab would be a sub-44px target on the one surface that is phone-first. */ .ac-tabs{display:flex;gap:2px;padding:0 16px;margin:0 0 4px; border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .ac-tabs::-webkit-scrollbar{display:none} /* ⛔ THE TABS ARE NOT UNDERLINED — AND THE EARLIER NOTE HERE SAID THE OPPOSITE, SO READ THIS BEFORE «FIXING» IT BACK (operator ruling 2026-08-13, taken against LIVE PROD, superseding the ruling of the same date taken against the artifact). The history, because it is the whole reason this comment is long: the first draft set `text-decoration:none`, arguing that the underline visible in the mockup was not a design decision at all but the mockup's own un-reset `a{}` rule (:70) leaking through. That draft was overruled on the «what he SEES in the artifact» acceptance rule and the underline was put in deliberately. ⚠️ THE FIRST DRAFT WAS RIGHT, AND THE OPERATOR HAS CONFIRMED IT. Seen on the shipped screen rather than in the mockup, the underline reads as four raw links rather than a tab row, which is what the earlier author predicted. «What he SEES» still decides — it now decides against the underline, because the surface being judged is the live cabinet and not the plate. The un-reset `a{}` diagnosis is recorded as CORRECT so the next reader does not re-derive it from scratch a third time. `text-decoration:none` is written EXPLICITLY rather than left to the storefront reset (`shop-storefront.css:35 a{color:inherit;text-decoration: none}`): this sheet must not depend on another sheet's reset for a rule the operator ruled on by name, and an explicit declaration is what a guard can read. `text-underline-offset` went with the underline — it styled nothing once there was no line to offset. */ .ac-tabs a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center; padding:0 11px;font-size:var(--f3);color:var(--muted); text-decoration:none; border-bottom:2px solid transparent} /* The current tab is the only one that is not muted, and it carries a rule the width of the word. `aria-current` IS the selector — the state is announced to a screen reader and painted from the same attribute, so a tab cannot look current while telling assistive tech it is not. */ .ac-tabs a[aria-current]{color:var(--fg);font-weight:700;border-bottom-color:var(--accent)} @media (hover:hover){.ac-tabs a:hover{color:var(--fg)}} .ac-tabs a:active{color:var(--fg)} /* ── THE SAVED GRID IS EXACTLY TWO COLUMNS, ON EVERY WIDTH ──────────────────── Operator decision 2026-08-13, taken against LIVE PROD. `/account/saved` renders the storefront's own `_card.php` inside the storefront's own `.grid` — deliberately, so the cabinet's tile can never drift from the shop's (see the docblock of `account/saved.php`). It therefore inherited the CATALOGUE's column rule, and that rule is not «two»: `shop-storefront.css:322` opens at `repeat(2,1fr)`, then :323 and :389 hand the count to `repeat(auto-fill,minmax(240px→280px,1fr))` at 600px and above. On a catalogue that is right — a wide screen should show more of the shop. On the buyer's own saved list the operator wants two, and only two, at any width. ⛔ THE CONTAINER IS THE ONLY THING TOUCHED, AND `_card.php` IS NOT TOUCHED AT ALL. That partial is shared with the storefront; a second tile template — or a tile-level override that only the cabinet sets — is precisely the drift `saved.php` was written to prevent. Layout belongs to the screen, the tile belongs to the fleet. ⚠️ SPECIFICITY, NOT SHEET ORDER, IS WHAT MAKES THIS WIN. `.ac-page .grid` is (0,2,0) against the catalogue rules' (0,1,0), so it beats them from any sheet in any order, INCLUDING the ones inside `@media` blocks — a media query adds no specificity. This is the same mechanism, and the same reasoning, as the two-line title override in `saved.php`. It means no `!important` and no dependence on which stylesheet the browser saw last. ⚠️ ONE DECLARATION, NO BREAKPOINT OF ITS OWN. Stating the count once, outside any media query, is what makes 393px and 1280px the same answer: adding a desktop-only rule here would re-create the width-dependent behaviour this decision removes. */ .ac-page .grid{grid-template-columns:repeat(2,1fr)} /* ═══════════════════════════════════════════════════════════════════════════ MESSAGING — the buyer's inbox and one thread (wave 2 of the messaging ТЗ). Canon frames «Buyer · every shop in one inbox» and «Buyer · Thread» (artifact 8c9bf375), accepted on composition and order. ⛔ THE RULES LIVE HERE AND NOT IN shop-storefront.css, for the reason at the top of this file: that sheet is held under the initial congestion window (14,600 gzip, clause C-08b) and it is loaded by every phone opening an Instagram-bio link. These screens are behind a sign-in and already pay for this sheet, so they pay for their own paint too. The thread page is served from a `/c//…` address and still renders `_chrome.php`, which is what links this file — the sheet follows the CHROME, not the URL. ⚠️ NOTHING TO BUMP: the pin is the CRC32 of these bytes. ═══════════════════════════════════════════════════════════════════════════ */ /* ── the inbox row. One per SHOP, never per item. ────────────────────────── */ .ac-inbox-row{display:flex;align-items:flex-start;gap:10px; border:1px solid var(--edge);border-radius:14px;padding:12px;background:var(--bg); color:inherit;text-decoration:none} .ac-inbox-row:hover{border-color:var(--accent)} .ac-inbox-row:active{background:var(--tint)} /* ⛔ UNREAD IS TWO MARKS, NOT ONE (canon). The dot is the fast one; the weight on the name is the one that survives a bright screen and a colour-blind reader. Either alone is a single point of failure for the only state this screen tracks. */ .ac-inbox-dot{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%; background:var(--accent)} .ac-inbox-b{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto} .ac-inbox-top{display:flex;align-items:baseline;gap:10px} .ac-inbox-n{font-size:var(--f3);font-weight:600;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .ac-inbox-row-un .ac-inbox-n{font-weight:700} .ac-inbox-t{margin-left:auto;flex:0 0 auto;font-size:var(--f2);color:var(--muted)} .ac-inbox-p{font-size:var(--f2);color:var(--muted);line-height:1.5; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The count in words, for a screen reader and for anybody the dot does not reach. Visually it is the quiet third mark, never a badge. */ .ac-inbox-u{font-size:var(--f1);font-weight:700;color:var(--accent)} /* ── one thread ─────────────────────────────────────────────────────────── */ .ac-th{display:flex;flex-direction:column;gap:8px} .ac-th-day{align-self:center;font-size:var(--f1);font-weight:700;color:var(--muted); letter-spacing:.02em;text-transform:uppercase;padding:2px 0} .ac-th-b{position:relative;max-width:86%;padding:10px 12px;border-radius:14px; font-size:var(--f3);line-height:1.55;overflow-wrap:anywhere} .ac-th-b-mine{align-self:flex-end;background:var(--accent);color:var(--accent-ink); border-bottom-right-radius:6px} .ac-th-b-them{align-self:flex-start;background:var(--card);border:1px solid var(--line); border-bottom-left-radius:6px} .ac-th-who{display:block;font-size:var(--f1);font-weight:700;color:var(--muted); margin-bottom:2px} .ac-th-t{display:block;margin-top:4px;font-size:var(--f1);opacity:.75; font-family:var(--fm);font-variant-numeric:tabular-nums} /* ⛔ THE PLATFORM IS NOT A PARTICIPANT. Full width, no tail, no author, no side — three of the four benchmarked marketplaces keep system text out of the bubble stream and Mercari treats it as an anti-phishing invariant: anything that looks like the platform inside a bubble is a scam. */ .ac-th-sys{margin:6px 0;align-self:stretch;text-align:center;font-size:var(--f1); color:var(--muted);line-height:1.5;background:var(--tint);border-radius:10px; padding:8px 12px} /* The item card, above the message that carries it. It leans to the author's side so the pairing is readable without a line drawn between them. */ .ac-th-item{display:flex;align-items:center;gap:10px;align-self:flex-start; max-width:86%;border:1px solid var(--line);border-radius:12px;padding:8px; background:var(--card);color:inherit;text-decoration:none} .ac-th-item-mine{align-self:flex-end} .ac-th-item:hover{border-color:var(--accent)} .ac-th-item-ph{flex:0 0 auto;width:44px;height:44px;border-radius:8px; object-fit:cover;background:var(--tint);display:block} .ac-th-item-b{display:flex;flex-direction:column;gap:2px;min-width:0} .ac-th-item-n{font-size:var(--f2);font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .ac-th-item-p{font-size:var(--f2);font-weight:700} /* ── the composer ───────────────────────────────────────────────────────── */ .ac-th-c{display:flex;flex-direction:column;gap:8px} .ac-th-ta{width:100%;min-height:88px;resize:vertical;font:inherit; font-size:var(--f3);line-height:1.5;padding:11px 12px;border-radius:10px; border:1px solid var(--edge);background:var(--bg);color:var(--fg)} .ac-th-c .ac-btn{align-self:flex-start} /* The trap. Off-screen rather than `display:none`: a field a browser refuses to render is a field some bots skip, and the whole value of it is that they do not. */ .ac-th-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── WAVE 5 · PHOTOS IN THE THREAD (ТЗ §5.2) ───────────────────────────────── ⛔ THESE RULES SHIP IN THE SHEET AND NOT INLINE IN `thread.php`, and the reason is a GUARD rather than a preference. `DirectBuyerAccountScreenTest` clause H-1 sweeps every /