/* look14-market.css — v470 G · the Extra Features card in Jetsy's own look. Joe, Sat 24 Oct 2026, 12:20am, a screenshot of Extra Features on Business: "Make 5 major upgrades to this card". WHY. Extra Features is Jetsy's store — every card the account does not have on its page yet, one tap to add. On his phone it read like a settings dump: an orange block tab, a plain search box, a flat run of rows each with an outlined orange "Add". The store does the same job with a calmer grammar: a segmented control, a gray search field with the magnifier inside, big colored icon tiles, the name heavy and the line under it quiet, a small tinted capsule for the one action, a featured row to swipe at the top, a product page when you tap a row, and a small moment when something is added. WHAT (paint only — every button is the one board.js draws; look14-market.js only adds things beside them): 1 · the header: the two tabs (.cmk-tabs / .cmk-tab) become an segmented control, the counts quiet numbers; the search (.cmk-q) an search bar (gray, the magnifier inside, 44 px, 17 px type, no orange ring); the explainer (.bnote) a 13 px footer note under them. 2 · the rows: a 52 px colored tile (look13's), the name 17 px semibold, the line 13 px quiet up to two lines, hairlines inset after the tile, one grouped surface per section (.l14m-grp, the script's wrapper) under a 20 px semibold header with its count ("Money · 6"); Add is a small tinted capsule reading ADD (the app's own word, set in capitals), Put away a quiet gray capsule, "On the Today tab" a quiet check and the words. 3 · the featured strip (.l14m-feat): up to four featured cards at the top of the To-add tab, each a copy of its row's tile and words with an ADD that forwards its tap to the row's own button. 4 · the preview sheet (.l14m-ov / .l14m-sh): a tap on a row opens an App-Store product page — the big tile, the name, the line, one prominent pill that taps the row's own button, Done. A CSS animation slides it up (no frame tricks: a two-frame class toggle failed on Joe's own phone); reduced motion: none. 5 · the moment of adding: the capsule turns into a green check with a short spring before the row goes (the script holds the tap for 700 ms, then taps the same button); the drawer's "Put away: … Undo" note (.cmk-note) is an iOS banner-like line. Search results stay the grouped rows, the letters typed bold (). LIGHT MODE (html.je-light): easy2.js flips the literal colors of every rule that does not name je-light, so every color here is a variable: dark values under html:not(.nolook14), light values under html.je-light:not(.nolook14). Taps ≥ 44 px: the capsules are drawn by a ::before inside a 44 px button. OFF: localStorage nolook14 = 1 → html.nolook14 before first paint; every rule here sits under html:not(.nolook14), so v469's card comes back exactly. No @import, no outside URL (the two glyphs are inline SVG data). */ /* ------------------------------------------------------------------------------------------------ the roles ---- */ html:not(.nolook14){ --l14m-ink1:#F5F7FB; --l14m-ink2:#A7B3C6; --l14m-ink3:#8794A8; --l14m-seg:rgba(110,124,148,.24); --l14m-seg-on:#5B6A80; --l14m-seg-ink:#EBEBF5; --l14m-seg-on-ink:#FFFFFF; --l14m-seg-sh:0 3px 8px rgba(0,0,0,.24),0 1px 1px rgba(0,0,0,.12); --l14m-field:rgba(110,124,148,.24); --l14m-field-on:rgba(110,124,148,.32); --l14m-ph:#8A94A6; --l14m-cell:#162133; --l14m-cell-ring:rgba(255,255,255,.06); --l14m-cell-press:#1E2C43; --l14m-sep:rgba(255,255,255,.10); --l14m-tint:#FF8A3D; --l14m-pill:rgba(255,138,61,.16); --l14m-pill-press:rgba(255,138,61,.30); --l14m-fill:#FF6A1A; --l14m-fill-ink:#FFFFFF; --l14m-gray:rgba(110,124,148,.24); --l14m-gray-press:rgba(110,124,148,.40); --l14m-green:#3ED598; --l14m-green-bg:rgba(62,213,152,.16); --l14m-sheet:#0C131F; --l14m-ov:rgba(0,0,0,.52); --l14m-grab:rgba(255,255,255,.30); --l14m-sheet-sh:0 -16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07); --l14m-ring:#4BA3F5; --l14m-mark:#FFFFFF; --l14m-glass:rgba(22,33,51,.92); } html.je-light:not(.nolook14){ --l14m-ink1:#0B1220; --l14m-ink2:#5B6475; --l14m-ink3:#6B7486; --l14m-seg:rgba(110,124,148,.12); --l14m-seg-on:#FFFFFF; --l14m-seg-ink:#3C3C43; --l14m-seg-on-ink:#000000; --l14m-seg-sh:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04); --l14m-field:rgba(110,124,148,.12); --l14m-field-on:rgba(110,124,148,.18); --l14m-ph:#8A94A6; --l14m-cell:#FFFFFF; --l14m-cell-ring:rgba(10,20,40,.08); --l14m-cell-press:#E3E8EF; --l14m-sep:rgba(52,64,84,.18); --l14m-tint:#C2410C; --l14m-pill:rgba(194,65,12,.11); --l14m-pill-press:rgba(194,65,12,.22); --l14m-fill:#D9530F; --l14m-fill-ink:#FFFFFF; --l14m-gray:rgba(110,124,148,.12); --l14m-gray-press:rgba(110,124,148,.24); --l14m-green:#1FA971; --l14m-green-bg:rgba(31,169,113,.14); --l14m-sheet:#F3F5F9; --l14m-ov:rgba(0,0,0,.30); --l14m-grab:rgba(52,64,84,.30); --l14m-sheet-sh:0 -10px 40px rgba(16,32,58,.16); --l14m-ring:#1F6FD1; --l14m-mark:#0B1220; --l14m-glass:rgba(255,255,255,.94); } /* ------------------------------------------------------------------------------------- 1 · the header of the card ---- */ html:not(.nolook14) body #main section.bc.cmk > #cmk-bd{display:flex;flex-direction:column;align-items:stretch} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > *{order:5} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .cmk-tabs{order:1} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .cmk-q{order:2} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .bnote{order:3} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .l14m-feat{order:4} html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .bempty, html:not(.nolook14) body #main section.bc.cmk > #cmk-bd > .cmk-none{order:6} /* the segmented control: one gray track, the picked segment a lifted plate (look13-top's grammar) */ html:not(.nolook14) body #main .cmk-tabs{display:flex;flex-wrap:nowrap;gap:2px;margin:4px 0 10px;padding:2px;border-radius:11px;background:var(--l14m-seg)} /* 48 px: each segment is a 44 px tap */ html:not(.nolook14) body #main .cmk-tabs .cmk-tab{ position:relative;flex:1 1 0%;min-width:0;min-height:44px;height:44px;margin:0;padding:0 6px;border:0;border-radius:9px;box-shadow:none; background:none;color:var(--l14m-seg-ink);font:500 15px/20px var(--j12-sf);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; -webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear,color var(--j12-tq) linear; } html:not(.nolook14) body #main .cmk-tabs .cmk-tab.on{background:var(--l14m-seg-on);color:var(--l14m-seg-on-ink);box-shadow:var(--l14m-seg-sh);font-weight:600} html:not(.nolook14) body #main .cmk-tabs .cmk-tab:focus-visible{outline:2px solid var(--l14m-ring);outline-offset:-2px} /* the count: a small quiet number (look14-market.js wraps it; the parentheses stay in the text for the tests, drawn 0 wide) */ html:not(.nolook14) body #main .cmk-tabs .cmk-tab .l14m-n{font:500 13px/20px var(--j12-sf);color:var(--l14m-ink2);margin-left:5px;font-variant-numeric:tabular-nums} html:not(.nolook14) body #main .cmk-tabs .cmk-tab.on .l14m-n{color:var(--l14m-ink2)} html:not(.nolook14) body #main .cmk-tabs .cmk-tab .l14m-n i{font-style:normal;font-size:0;line-height:0} /* the search bar (two #main: look12 styles every input with one id and !important corners / ring) */ html:not(.nolook14) body #main#main .cmk-q{ height:44px!important;min-height:44px!important;margin:0 0 6px;padding:0 12px 0 36px!important;border:0!important;border-radius:11px!important;box-shadow:none!important; background:var(--l14m-field) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E") 11px 50%/18px 18px no-repeat!important; color:var(--l14m-ink1)!important;font:400 17px/22px var(--j12-sf)!important;-webkit-appearance:none;appearance:none; transition:background-color var(--j12-tq) linear; } html:not(.nolook14) body #main#main .cmk-q::placeholder{color:var(--l14m-ph)!important;opacity:1} html:not(.nolook14) body #main#main .cmk-q:focus{outline:none!important;box-shadow:none!important;background-color:var(--l14m-field-on)!important} html:not(.nolook14) body #main#main .cmk-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;cursor:pointer; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%238E8E93'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat} /* the explainer: a footer note under the controls */ html:not(.nolook14) body #main section.bc.cmk .bnote{margin:0 0 14px;padding:0 4px;font:400 13px/18px var(--j12-sf);color:var(--l14m-ink3)} /* ---------------------------------------------------------------------------------- 2 · rows like store listings ---- */ html:not(.nolook14) body #main #cmk-bd .cmk-g{margin:0} html:not(.nolook14) body #main #cmk-bd .cmk-hd.lx-hd{ display:flex;align-items:baseline;gap:6px;margin:14px 2px 8px!important;font:600 20px/25px var(--j12-sf)!important;letter-spacing:-.02em!important;color:var(--l14m-ink1)!important; } html:not(.nolook14) body #main #cmk-bd .cmk-hd .l14m-cnt{font:400 15px/20px var(--j12-sf);color:var(--l14m-ink3);letter-spacing:0;font-variant-numeric:tabular-nums} html:not(.nolook14) body #main #cmk-bd .l14m-grp{background:var(--l14m-cell);box-shadow:inset 0 0 0 1px var(--l14m-cell-ring);border-radius:16px;overflow:hidden;margin:0 0 6px} html:not(.nolook14) body #main #cmk-bd .cmk-r{ position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:72px;margin:0;padding:10px 10px 10px 12px;border:0; cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear; } html:not(.nolook14) body #main #cmk-bd .cmk-r:active{background:var(--l14m-cell-press)} html:not(.nolook14) body #main #cmk-bd .cmk-r + .cmk-r::before{content:"";position:absolute;top:0;right:0;left:76px;height:1px;background:var(--l14m-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none} html:not(.nolook14) body #main #cmk-bd .cmk-r[hidden] + .cmk-r::before{display:none} html:not(.nolook14) body #main #cmk-bd .cmk-r[hidden],html:not(.nolook14) body #main #cmk-bd .cmk-g[hidden]{display:none!important} /* the search hides rows with [hidden] */ /* the tile: look13's colored tile, 52 px with its glyph 28 */ html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-m, html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-m.j6-mi[data-l13c]{flex:0 0 52px;width:52px!important;height:52px!important;min-height:52px!important;border-radius:12px!important;font-size:.9rem} html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-m.j6-mi .ji{width:28px!important;height:28px!important} html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-tx{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;justify-content:center} html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-tx > b{display:block;font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;color:var(--l14m-ink1);overflow-wrap:break-word} html:not(.nolook14) body #main #cmk-bd .cmk-r .cmk-d{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px; font:400 13px/18px var(--j12-sf);color:var(--l14m-ink2); } html:not(.nolook14) body #main #cmk-bd .cmk-new{margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--l14m-pill);color:var(--l14m-tint);font:700 11px/14px var(--j12-sf);letter-spacing:.04em;text-transform:uppercase;vertical-align:2px} /* the letters typed, bold (look14-market.js) */ html:not(.nolook14) body #main #cmk-bd mark.l14m-m{background:none;color:var(--l14m-mark);font-weight:800} html:not(.nolook14) body #main #cmk-bd .cmk-d mark.l14m-m{color:var(--l14m-ink1);font-weight:700} /* the action: a 44 px button whose capsule (30 px) is drawn by its ::before, so a thumb has the whole 44 */ html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm, html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm.cmk-add{ position:relative;isolation:isolate;flex:0 0 auto;margin:0 0 0 auto;align-self:center;height:44px;min-height:44px;min-width:64px;max-width:9.5rem;padding:0 14px!important; border:0;border-radius:999px;background:none!important;box-shadow:none!important;color:var(--l14m-tint)!important; font:600 15px/18px var(--j12-sf)!important;letter-spacing:-.01em;text-transform:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:none!important; } html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:7px;bottom:7px;border-radius:10px;background:var(--l14m-pill);transition:background-color var(--j12-tq) linear} html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm.cmk-add:active::before{background:var(--l14m-pill-press)} html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm:focus-visible{outline:none} html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm:focus-visible::before{box-shadow:0 0 0 2px var(--l14m-ring)} /* Put away (the On-your-page tab): the same words as today, a quiet gray capsule; the Spanish ("Quitar de mi página") takes two lines, so this capsule is a touch taller (36 px) and never wider than 6.5rem — the name beside it keeps whole words */ html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm:not(.cmk-add){color:var(--l14m-ink1)!important;text-transform:none;letter-spacing:0;white-space:normal;text-align:center;font-size:13px!important;line-height:15px!important;padding:0 10px!important;max-width:6.5rem} html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm:not(.cmk-add)::before{top:4px;bottom:4px;background:var(--l14m-gray)} html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm:not(.cmk-add):active::before{background:var(--l14m-gray-press)} /* "On the Today tab": a quiet check and the words */ html:not(.nolook14) body #main #cmk-bd .cmk-r > .cmk-on{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;max-width:7.5rem;margin-left:auto;font:500 12px/15px var(--j12-sf);color:var(--l14m-ink3);text-align:left} html:not(.nolook14) body #main #cmk-bd .cmk-r > .cmk-on::before{content:"";flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:var(--l14m-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat} /* the empty states keep look12's shape; the "no card is called that" note sits under the rows */ html:not(.nolook14) body #main #cmk-bd .cmk-none{margin-top:8px} /* ------------------------------------------------------------------------------------------- 3 · the featured strip ---- */ html:not(.nolook14) body #main .l14m-feat{ display:flex;gap:10px;margin:0 -16px 10px;padding:2px 16px 6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;scroll-padding:16px;scrollbar-width:none;-ms-overflow-style:none; } html:not(.nolook14) body #main .l14m-feat::-webkit-scrollbar{display:none} html:not(.nolook14) body #main .l14m-feat[hidden]{display:none} html:not(.nolook14) body #main .l14m-fc{ flex:0 0 auto;width:calc(100% - 30px);max-width:320px;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:92px;padding:14px 12px 14px 14px; border-radius:18px;background:var(--l14m-cell);box-shadow:inset 0 0 0 1px var(--l14m-cell-ring);scroll-snap-align:start; } html:not(.nolook14) body #main .l14m-fc .cmk-m, html:not(.nolook14) body #main .l14m-fc .cmk-m.j6-mi[data-l13c]{flex:0 0 64px;width:64px!important;height:64px!important;min-height:64px!important;border-radius:15px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:1rem} html:not(.nolook14) body #main .l14m-fc .cmk-m.j6-mi .ji{width:34px!important;height:34px!important} html:not(.nolook14) body #main .l14m-fc .l14m-ft{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;justify-content:center} html:not(.nolook14) body #main .l14m-fc .l14m-ft b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 17px/21px var(--j12-sf);letter-spacing:-.01em;color:var(--l14m-ink1)} html:not(.nolook14) body #main .l14m-fc .l14m-ft small{display:block;margin-top:2px;font:400 13px/17px var(--j12-sf);color:var(--l14m-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html:not(.nolook14) body #main .l14m-fc .l14m-fa{ position:relative;isolation:isolate;flex:0 0 auto;height:44px;min-width:64px;margin:0;padding:0 14px;border:0;border-radius:999px;background:none; color:var(--l14m-tint);font:600 15px/18px var(--j12-sf);letter-spacing:-.01em;text-transform:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent; } html:not(.nolook14) body #main .l14m-fc .l14m-fa::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:7px;bottom:7px;border-radius:10px;background:var(--l14m-pill);transition:background-color var(--j12-tq) linear} html:not(.nolook14) body #main .l14m-fc .l14m-fa:active::before{background:var(--l14m-pill-press)} html:not(.nolook14) body #main .l14m-fc .l14m-fa:focus-visible{outline:none} html:not(.nolook14) body #main .l14m-fc .l14m-fa:focus-visible::before{box-shadow:0 0 0 2px var(--l14m-ring)} /* --------------------------------------------------------------------------------------------- 4 · the preview sheet ---- */ @keyframes l14m-fade{from{opacity:0}to{opacity:1}} @keyframes l14m-unfade{from{opacity:1}to{opacity:0}} @keyframes l14m-up{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes l14m-down{from{transform:translateY(0)}to{transform:translateY(100%)}} html:not(.nolook14) .l14m-ov{ position:fixed;left:0;right:0;top:0;bottom:0;z-index:74;display:flex;align-items:flex-end;justify-content:center; background:var(--l14m-ov);-webkit-tap-highlight-color:transparent;touch-action:none; animation:l14m-fade 240ms ease-out both; } html:not(.nolook14) .l14m-ov.out{animation:l14m-unfade 240ms ease-in both;pointer-events:none} html:not(.nolook14).l14m-lock{overflow:hidden} /* the page behind the sheet never moves */ html:not(.nolook14) .l14m-sh{ position:relative;box-sizing:border-box;width:100%;max-width:34rem;max-height:calc(100% - 44px - env(safe-area-inset-top,0px)); overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y; margin:0;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0; background:var(--l14m-sheet);color:var(--l14m-ink1);box-shadow:var(--l14m-sheet-sh);text-align:left;outline:none; font:400 17px/22px var(--j12-sf);animation:l14m-up 380ms var(--j12-spring) both; } html:not(.nolook14) .l14m-ov.out .l14m-sh{animation:l14m-down 240ms ease-in both} html:not(.nolook14) .l14m-sh.l14m-drag{animation:none} html:not(.nolook14) .l14m-sh *{box-sizing:border-box} html:not(.nolook14) .l14m-cap{position:sticky;top:0;z-index:2;margin:0 -16px 4px;padding:0 16px;background:var(--l14m-sheet)} html:not(.nolook14) .l14m-grab{width:36px;height:5px;border-radius:3px;margin:0 auto;position:relative;top:6px;background:var(--l14m-grab)} html:not(.nolook14) .l14m-shd{position:relative;display:flex;align-items:center;justify-content:center;height:50px;padding:0 64px} html:not(.nolook14) .l14m-shd h2{margin:0;font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;color:var(--l14m-ink1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html:not(.nolook14) .l14m-done{position:absolute;right:-8px;top:3px;height:44px;min-width:44px;margin:0;padding:0 8px;border:0;background:none;color:var(--l14m-tint);font:600 17px/22px var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent} html:not(.nolook14) .l14m-done:focus-visible{outline:2px solid var(--l14m-ring);outline-offset:-2px;border-radius:8px} /* the product page: the big tile beside the name, the line under, the one pill */ html:not(.nolook14) .l14m-top{display:flex;align-items:center;gap:16px;padding:6px 2px 0} html:not(.nolook14) .l14m-sh .cmk-m, html:not(.nolook14) .l14m-sh .cmk-m.j6-mi[data-l13c]{flex:0 0 88px;width:88px!important;height:88px!important;min-height:88px!important;border-radius:20px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:1.3rem;box-shadow:0 10px 24px rgba(0,0,0,.25)!important} html:not(.nolook14) .l14m-sh .cmk-m.j6-mi .ji{width:48px!important;height:48px!important} html:not(.nolook14) .l14m-nm{flex:1 1 0%;min-width:0} html:not(.nolook14) .l14m-nm b{display:block;font:700 22px/27px var(--j12-sf);letter-spacing:-.02em;color:var(--l14m-ink1);overflow-wrap:break-word} html:not(.nolook14) .l14m-nm .cmk-new{display:inline-block;margin:6px 0 0;padding:2px 7px;border-radius:999px;background:var(--l14m-pill);color:var(--l14m-tint);font:700 11px/14px var(--j12-sf);letter-spacing:.04em;text-transform:uppercase} html:not(.nolook14) .l14m-nm .l14m-on{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 13px/16px var(--j12-sf);color:var(--l14m-ink3)} html:not(.nolook14) .l14m-nm .l14m-on::before{content:"";flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:var(--l14m-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat} html:not(.nolook14) .l14m-desc{margin:16px 2px 0;font:400 15px/21px var(--j12-sf);color:var(--l14m-ink2)} html:not(.nolook14) .l14m-do{ display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin:20px 0 0;padding:12px 16px;border:0;border-radius:14px; background:var(--l14m-fill);color:var(--l14m-fill-ink);font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform var(--j12-tq) var(--j12-spring),opacity var(--j12-tq) linear; } html:not(.nolook14) .l14m-do.l14m-quiet{background:var(--l14m-gray);color:var(--l14m-ink1)} html:not(.nolook14) .l14m-do:active{transform:scale(.98);opacity:.9} html:not(.nolook14) .l14m-do:focus-visible{outline:2px solid var(--l14m-ring);outline-offset:2px} /* ------------------------------------------------------------------------------------------ 5 · the moment of adding ---- */ @keyframes l14m-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes l14m-row{0%{transform:scale(1)}35%{transform:scale(.985)}100%{transform:scale(1)}} html:not(.nolook14) body #main .l14m-flip{animation:l14m-row 420ms var(--j12-spring) both} html:not(.nolook14) body #main .l14m-flip > .b.sm.cmk-add, html:not(.nolook14) body #main .l14m-fc.l14m-flip .l14m-fa{color:transparent!important} html:not(.nolook14) body #main .l14m-flip > .b.sm.cmk-add::before, html:not(.nolook14) body #main .l14m-fc.l14m-flip .l14m-fa::before{background:var(--l14m-green-bg)} html:not(.nolook14) body #main .l14m-flip > .b.sm.cmk-add::after, html:not(.nolook14) body #main .l14m-fc.l14m-flip .l14m-fa::after{ content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%; background:var(--l14m-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat; animation:l14m-pop 420ms var(--j12-spring) both; } /* the drawer's "Put away: … Undo" note (board.js draws it over the tiles for a few seconds): an iOS banner-like line */ html:not(.nolook14) body #main #lx .cmk-note{ position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:12px;margin:0 0 12px;padding:10px 12px 10px 54px;min-height:56px; border-radius:16px;background:var(--l14m-glass);box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 0 0 1px var(--l14m-cell-ring); color:var(--l14m-ink1);font:400 15px/20px var(--j12-sf); } html:not(.nolook14) body #main #lx .cmk-note::before{ content:"";position:absolute;left:12px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:8px; background:var(--l14m-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat; } html:not(.nolook14) body #main #lx .cmk-note > span{flex:1 1 0%;min-width:0} html:not(.nolook14) body #main #lx .cmk-note > span b{font-weight:600;color:var(--l14m-ink1)} html:not(.nolook14) body #main #lx .cmk-note > .b.sm{flex:0 0 auto;margin:0;min-height:44px;padding:0 10px;border:0;background:none!important;box-shadow:none!important;color:var(--l14m-tint)!important;font:600 17px/22px var(--j12-sf)!important} /* ------------------------------------------------------------------------------------------------ reduced motion ---- */ @media (prefers-reduced-motion:reduce){ html:not(.nolook14) .l14m-ov,html:not(.nolook14) .l14m-ov.out,html:not(.nolook14) .l14m-sh,html:not(.nolook14) .l14m-ov.out .l14m-sh, html:not(.nolook14) body #main .l14m-flip,html:not(.nolook14) body #main .l14m-flip > .b.sm.cmk-add::after,html:not(.nolook14) body #main .l14m-fc.l14m-flip .l14m-fa::after{animation:none!important} html:not(.nolook14) .l14m-ov.out{opacity:0} html:not(.nolook14) body #main .cmk-tabs .cmk-tab,html:not(.nolook14) body #main .cmk-q,html:not(.nolook14) body #main #cmk-bd .cmk-r,html:not(.nolook14) body #main #cmk-bd .cmk-r > .b.sm::before, html:not(.nolook14) body #main .l14m-fc .l14m-fa::before,html:not(.nolook14) .l14m-do{transition:none!important} html:not(.nolook14) .l14m-do:active{transform:none} } /* v474 (Joe 24 Oct 10:55am): Add is Jetsy's own button — sentence case on a rounded-rectangle tint, not a store's capital-letter capsule */