/* ═══════════════════════════════════════════════════════════════════════════ PinPint, shared.css The single source of truth for colour, type, motion and shared components. Load this FIRST on every page, before that page's own stylesheet. WHY THIS FILE EXISTS The three page stylesheets were cleanly namespaced (.app-*, .wo-*) with almost no selector overlap, the problem was never duplication. It was that 500 hardcoded hex values across 67 distinct colours meant there was no source of truth, so theming broke silently (the pub sheet shipped as hardcoded dark hex and ignored light mode entirely). Tokens fix that class of bug permanently. COLOUR PHILOSOPHY One green was doing six jobs, brand, cheap prices, success, active nav, links and buttons, which is exactly why the old UI read as a generic dark green template. Roles are now separated: · brand - identity and primary actions. Never used to encode data. · price - a dedicated cheap→dear ramp. This is the product's data and it gets its own scale so a price can never be mistaken for a button. Filled pills with dark ink; chrome is outlined or solid brand. The "mid" band is pint-head cream, which is both a true neutral and on-subject. · brass - the pub fittings. Secondary accent and all ornament. · live - a warm ember rose. Means "happening right now", nothing else, and is kept clear of the copper "dear" band so busy never reads as expensive. · neutral, true grey, no hue. Every surface is neutral so that anything with a colour on it is carrying information. See the palette note below for why this stopped being warm. ═══════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ PALETTE: neutral ground, coloured data The grounds are grey. Every surface from the map up is a pure neutral, and the only colour left on screen is colour that means something: the price ramp, the brand green, the live rose, brass on ornament. This replaces "The Snug", peat and oak grounds with cream ink, and the reason is legibility rather than taste. Cream ink is by definition not white: it is a step down the contrast ramp before a single pixel has been painted, and the people this app is for are reading small numbers in a dark bar. White on a neutral ground is the most contrast a screen can produce. There is no good argument for spending it on atmosphere. The reference is FotMob, measured rather than remembered, a dense app with the same problem, read by the same eyes: dark body #000000 · card #1D1D1D · raised #262626 · line #333333 text #FFFFFF · muted #9F9F9F · brand #33C771 light body #FAFAFA · card #FFFFFF · raised #F5F5F5 · line #EAEAEA text #000000 / #222222 · muted #717171 · brand #00985F Zero warm cast in either. The scale below follows the same rhythm, keeping PinPint own greens: the green is the brand, the grey is only the room it stands in. What is deliberately NOT grey is the price ramp. It is the product data and the one thing on screen that must never read as chrome, cheap green, cream "about average", copper dear, and a true grey reserved for "nobody has told us yet". Brass survives on ornament for the same reason: strip it and this is any dashboard with a map on it. ════════════════════════════════════════════════════════════════════════════ */ /* ── DARK ────────────────────────────────────────────────────────────── */ :root{ /* Neutrals, true grey, no hue at all */ --n-950:#000000; /* deepest, map ground */ --n-900:#0F0F0F; /* app background */ --n-850:#1D1D1D; /* panel */ --n-800:#262626; /* panel raised */ --n-750:#303030; /* hover surface */ --n-700:#333333; /* border */ --n-600:#454545; /* border strong */ --n-500:#5E5E5E; /* disabled ink, exempt from contrast rules by design */ /* Muted ink. 6.37:1 on --panel and 5.72:1 on --panel-2, so the smallest labels in the app clear AA on both surfaces they are painted on, while staying a clear tier below --text-2. The old value, #9C8663, was a warm tan that only ever measured 4.69, it had been lifted twice to keep it legible, which is what a colour looks like when it is fighting the job it was given. */ --n-400:#9F9F9F; /* muted ink */ --n-300:#C4C4C4; /* secondary ink */ --n-100:#E6E6E6; /* bright secondary */ --n-50:#FFFFFF; /* primary ink, white, full stop */ /* Brand, heritage bottle green, deeper and warmer than the old #4ade80 */ --brand-700:#124A2C; --brand-600:#1A6640; --brand-500:#248455; --brand-400:#38A46B; --brand-300:#68C793; --brand-ghost:rgba(56,164,107,.14); --brand-ring:rgba(56,164,107,.36); /* The brand as raw channels, so a rule that needs its own alpha can mix one without hardcoding a hex. Every tint in app.css, index.css and whats-on.css used to be rgba(74,222,128,x) the pre-2025 brand green, frozen into ~110 rules that therefore ignored both the current palette and the light theme entirely. */ --brand-rgb:56,164,107; /* Brass, the fittings. Secondary accent and all ornament. */ --brass-600:#8F6626; --brass-500:#B98A36; --brass-400:#D4A44C; --brass-300:#E7C87F; --brass-ghost:rgba(212,164,76,.13); /* Price ramp, data only, and the one place colour is allowed to mean something. Untouched by the move to grey grounds: on a neutral page these three read more clearly than they ever did on peat. */ --price-cheap:#38A46B; --price-cheap-ink:#04150C; --price-cheap-edge:#248455; --price-mid:#EBDCBE; --price-mid-ink:#1A1A1A; --price-mid-edge:#8C7757; --price-dear:#C87340; --price-dear-ink:#FFFFFF; --price-dear-edge:#9E5628; --price-cheap-soft:rgba(56,164,107,.15); --price-dear-soft:rgba(200,115,64,.17); /* No price on record. Deliberately off the ramp entirely, and deliberately not green: an unpriced pin used to be rgba(107,158,118) a desaturated version of the cheap band's own hue, so the single most important thing the map has to say, "nobody has told us what this costs", was rendered as a slightly duller version of "this is cheap". Grey is the one colour that cannot be misread as a price, because there is no grey on the ramp. */ --pin-none:#A8ADB3; --pin-none-ring:rgba(255,255,255,.55); /* Live, a warm ember rose. Distinct from brass and copper so "busy right now" never reads as "expensive". */ --live:#E4587B; --live-soft:rgba(228,88,123,.15); --live-glow:rgba(228,88,123,.42); /* Semantic */ /* --on-warn is the ink that goes ON --warn. Four controls used --warn-soft for this, which is --warn at 14% alpha, i.e. very nearly invisible, so the crawl panel's title, its close button and every stop number were amber-on-amber ghosts. --warn is a light amber here, so its ink is dark. */ --warn:#E0A93F; --warn-soft:rgba(224,169,63,.14); --on-warn:#1A1A1A; --danger:#E8705F; --danger-soft:rgba(232,112,95,.14); /* And the same again for --info, which the pass that added --on-warn did not reach: the Filters panel and the Price History panel both put a title and a close button on a solid --info header and coloured both with --info-soft, a 13% tint meant for backgrounds. Four controls, at 13% alpha, on their own colour, the headings were not faint, they were not there. Nobody saw it because both carried an emoji, and an emoji brings its own colour and ignores `color` entirely; the emoji rendered, the words beside it did not, and the panel read as decoration. --info is a light teal here, so its ink is dark. */ --info:#6FB6C4; --info-soft:rgba(111,182,196,.13); --on-info:#12191B; /* Raw channels, for the same reason as --brand-rgb: the semantic tints were written as rgba() of the *previous* palette, old red, old amber, old pink, so a "danger" wash and the --danger ink beside it were two different colours, and neither followed the theme. */ --danger-rgb:232,112,95; --warn-rgb:224,169,63; --live-rgb:228,88,123; /* Semantic aliases */ --bg:var(--n-900); --bg-deep:var(--n-950); --panel:var(--n-850); --panel-2:var(--n-800); --hover:var(--n-750); --border:var(--n-700); --border-strong:var(--n-600); --text:var(--n-50); --text-2:var(--n-300); --text-3:var(--n-400); --accent:var(--brand-400); --accent-solid:var(--brand-600); --on-accent:#FFFFFF; --ornament:var(--brass-500); /* The logo SVG and the beer-glass animation used to hardcode dark-theme greens inline, so they stayed dark-mode green on the parchment theme. */ --pin-body:var(--n-850); --pin-stroke:var(--brand-400); --pin-glow:var(--brand-500); --beer:#D9820B; /* beer is amber in both themes */ /* Elevation, neutral, to match the grounds */ --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 14px rgba(0,0,0,.5); --shadow-3:0 10px 34px rgba(0,0,0,.58); --shadow-4:0 -10px 44px rgba(0,0,0,.6); --glass:rgba(29,29,29,.88); color-scheme:dark; } /* ── LIGHT ─────────────────────────────────────────────────────────────── White cards on an off-white page. The off-white is #FAFAFA, a shade, not a tint: it separates the page from the cards without putting a colour cast on everything printed over it, which is what parchment was doing. */ :root[data-theme="light"]{ --n-950:#FFFFFF; --n-900:#FAFAFA; /* app background */ --n-850:#FFFFFF; /* panel */ --n-800:#F2F2F2; /* panel raised */ --n-750:#EAEAEA; /* hover surface */ --n-700:#E2E2E2; /* border */ --n-600:#C9C9C9; /* border strong */ --n-500:#8E8E8E; /* disabled ink */ /* 4.76:1 on --panel-2, 5.74:1 on white. */ --n-400:#6B6B6B; /* muted ink */ --n-300:#414141; /* secondary ink */ --n-100:#2A2A2A; --n-50:#111111; /* primary ink */ --brand-700:#0E3D24; --brand-600:#155434; --brand-500:#1A6B41; --brand-400:#1F8250; --brand-300:#38A46B; --brand-ghost:rgba(26,107,65,.09); --brand-ring:rgba(26,107,65,.3); --brand-rgb:26,107,65; --brass-600:#6E4E18; --brass-500:#8A6522; --brass-400:#A87F31; --brass-300:#C79E4C; --brass-ghost:rgba(138,101,34,.11); --price-cheap:#1A6B41; --price-cheap-ink:#FFFFFF; --price-cheap-edge:#0E3D24; /* The "about average" band was #FFFDF7, the old panel colour, so on the light theme it was a white chip on a white card and a white pin on a white map. Now that panels are actually white it would have been worse. Pint-head cream, which is the one warm colour on the ramp and reads instantly against both the white surfaces and the grey "no price yet". */ --price-mid:#F2E7CC; --price-mid-ink:#111111; --price-mid-edge:#94805C; --price-dear:#A85520; --price-dear-ink:#FFFFFF; --price-dear-edge:#7E3C13; --price-cheap-soft:rgba(26,107,65,.1); --price-dear-soft:rgba(168,85,32,.12); /* Darker on parchment, and far enough from the near-white "around average" band that the two never read as the same dot. */ --pin-none:#5E6469; --pin-none-ring:rgba(255,255,255,.9); --live:#B8365C; --live-soft:rgba(184,54,92,.1); --live-glow:rgba(184,54,92,.3); /* On parchment --warn is a dark brass, so its ink flips to near-white. */ --warn:#8A6522; --warn-soft:rgba(138,101,34,.11); --on-warn:#FFFFFF; --danger:#A83A2C; --danger-soft:rgba(168,58,44,.1); /* On parchment --info is a dark teal, so its ink flips to white. */ --info:#2C6B78; --info-soft:rgba(44,107,120,.1); --on-info:#FFFFFF; --danger-rgb:168,58,44; --warn-rgb:138,101,34; --live-rgb:184,54,92; --on-accent:#FFFFFF; --pin-body:var(--brand-700); --pin-stroke:var(--brand-600); --pin-glow:var(--brand-500); --accent:var(--brand-500); --accent-solid:var(--brand-500); --ornament:var(--brass-500); --shadow-1:0 1px 2px rgba(0,0,0,.07); --shadow-2:0 4px 14px rgba(0,0,0,.09); --shadow-3:0 10px 30px rgba(0,0,0,.13); --shadow-4:0 -8px 32px rgba(0,0,0,.13); --glass:rgba(255,255,255,.9); color-scheme:light; } /* ═══════════════════════════════════════════════════════════════════════════ TYPE ONE FAMILY. The app used to load three, DM Sans for text, Playfair Display for headings, Cinzel for the wordmark, which is three renderings of the same letter A on one screen, three font files on the critical path, and three chances for a fallback to swap in and reflow the page. The scale below was already measured against FotMob and tightened. Doing half the job left the other half visible: a dense information app reads as clean because everything on the screen is manifestly the same voice, and hierarchy comes from weight, size and colour rather than from changing face. A serif heading over a grotesque table is an editorial device, and this is not an editorial page, it is a price list somebody is reading in a bar. Inter is that one family. It was drawn for screen UI at small sizes: tall x-height, open apertures, unambiguous 1/l/I and 0/O, and real tabular figures, which is what --font-num exists to guarantee for a column of prices. The three tokens below are deliberately the same stack rather than one token: they name three JOBS, and every rule in the app already says which job it is doing, so a future decision to differentiate a heading face is one line here rather than a search across nine stylesheets. Weights 400/500/600/700/800 are loaded, and those are the five the stylesheets use, nothing is synthesised. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display:var(--font-sans); --font-num:var(--font-sans); --font-mono:ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* ── Type scale ────────────────────────────────────────────────────────── A 1.2 minor third from 10px produced a bottom end this app cannot use. Measured on the live map at 390px: sixteen distinct sizes between 9.5px and 32px, with 120 of 155 text nodes under 14px and 42 of them under 12px. A pub-price app is read by people in their fifties and sixties, in a dark bar, on a phone held at arm's length, and 10px uppercase labels with letter-spacing are the single least legible thing a screen can do. Measured on FotMob for comparison, a dense sports app with the same problem and a good reputation for solving it: six sizes (11.2, 12, 13, 14, 16, 19), one family, weights 400 and 500, and primary text at 15:1 contrast. The lesson is not "bigger", it is "fewer, and none of them tiny": a tight scale with a hard floor. So the bottom of this scale is deliberately compressed. --t-xs and --t-sm are now the same 13px, which looks like a mistake and is not, there was never a real design reason for two labels one half-pixel apart, and keeping both names means no stylesheet had to be rewritten to say it. 12px is the floor. Nothing in the interface goes below it. Everything at 16px and above is untouched: prices and headings were never the problem, and moving them would have reflowed the whole app. */ --t-2xs:12px; --t-xs:13px; --t-sm:13px; --t-base:15px; --t-md:16px; --t-lg:17px; --t-xl:20px; --t-2xl:24px; --t-3xl:30px; --t-4xl:38px; /* Space scale */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; /* Radius */ --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:15px; --r-xl:20px; --r-full:999px; /* Motion, one set of curves so the whole app moves like one object */ --ease-out:cubic-bezier(.32,.72,0,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:.15s; --dur:.26s; --dur-slow:.4s; --tab-h:58px; /* ── The top bar, as a measurement ─────────────────────────────────────── The same shape as --tabbar-h below, and it is here for the same reason that one is, but it was missing, and the difference showed up only once the app was on a home screen. Every page ships `viewport-fit=cover` and `apple-mobile-web-app-status- bar-style: black-translucent`, which together mean the page owns the strip of screen behind the clock and the battery. Installed, the window is the whole display; in a browser tab it is not, because the browser's own chrome is already sitting there and the inset resolves to 0. So --header-h was right in Safari and forty-odd pixels short on a home screen, and only on some pages: map.html padded its own header, app.css padded the chat header, and the other seven had their titles printed underneath the status bar. That is the "doesn't look like a uniform app", the pages were not disagreeing about design, they were disagreeing about where the top of the screen is. --header-nominal is the bar itself, for anything that needs the drawn height rather than the occupied one. --header-h is what it occupies, and it is what every page already offsets its content by, so defining it here fixes mine.css, profile.css, social.css and whats-on.css without any of them being touched, exactly as --tabbar-h does at the other end. */ --header-nominal:56px; --header-h:calc(var(--header-nominal) + env(safe-area-inset-top)); /* ── The bottom bar, as a measurement ──────────────────────────────────── --tabbar-h is what the nav actually occupies: its own height plus the home-indicator inset on an iPhone or a gesture-nav Android. --tabbar-safe is what anything floating over the app has to leave clear, and it is 0 by default. That distinction matters: app.html and admin.html carry their own navigation, whats-on has none at all, and hard-coding 58px into every floating element left dead space at the foot of the pages that never had this bar. Elements offset themselves by --tabbar-safe and are correct on every page without knowing which page they are on. */ --tabbar-h:calc(var(--tab-h) + env(safe-area-inset-bottom)); --tabbar-safe:0px; /* ── The on-screen keyboard, as a measurement ──────────────────────────── How much of the bottom of the window the soft keyboard is currently covering. Kept up to date by trackKeyboardInset() from the visualViewport API; it stays 0px on a laptop and on any browser without that API. A `position:fixed` bottom sheet is laid out against the *layout* viewport, which does not shrink when the keyboard opens, so a sheet pinned to bottom:0 keeps its footer somewhere under the keys while the browser scrolls the focused field up to meet it. That is how tapping the crawl builder's pub search ended up with the Date/Start/Finish row sitting on top of the thing being typed into. Offsetting by this makes the sheet end where the keyboard begins. */ --kb-inset:0px; /* ── Layers ────────────────────────────────────────────────────────────── Every fixed thing in this app belongs to one of six bands, and the bands are ordered by how much of your attention the thing is entitled to. This exists because the numbers were invented one screen at a time and stopped being comparable: the nav sat at 9500 and every panel, sheet and dialog on the map sat between 1400 and 6000, so the navigation rendered *over* the price-history modal, the auth dialog, the pub sheet and the bottom of the crawl builder, and stayed clickable through their backdrops. A dialog that the nav can cover is not modal. The rule is one line long: the nav is furniture, and anything the user deliberately opened outranks the furniture. */ /* 1000, not something smaller: Leaflet numbers its own panes from 200 to 800 (markers 600, popups 700, controls 800), so anything meant to float over the map has to clear 800 first. */ --z-map:1000; /* map chrome: legend, locate button, footer links */ --z-tabbar:1300; /* the bottom nav */ --z-sheet:3400; /* sheets and side panels, they cover the nav */ --z-dialog:5500; /* centred modal dialogs */ --z-bar:9500; /* bars that deliberately take the nav's place */ --z-float:9700; /* nudges, receipts, float above everything but toast */ --z-toast:9999; /* toasts and the loading screen */ } /* Numerals: prices must line up in columns everywhere they appear */ .num, .price, [data-num]{ font-variant-numeric:tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ RESET / BASE ═══════════════════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font-sans); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* Hierarchy now comes from weight and size rather than from a change of face, so the large end of the scale gets the optical tracking a grotesque needs: letterforms drawn to be legible at 13px sit loose at 24px and above. Bare element selectors on purpose, anything with a class of its own has already said what it wants and outranks this. */ h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.22} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:var(--accent);text-decoration:none} /* Nothing shows the grey mobile tap flash */ button,a,[role="button"],.tap{-webkit-tap-highlight-color:transparent} /* One visible focus style, everywhere */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); } :focus:not(:focus-visible){outline:none} /* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVES ═══════════════════════════════════════════════════════════════════════════ */ /* ── Buttons ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); padding:10px 16px;min-height:42px; border-radius:var(--r-md); font-size:var(--t-base);font-weight:600;letter-spacing:-.005em; border:1px solid transparent; transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); white-space:nowrap; } .btn:active:not(:disabled){transform:scale(.97)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-primary{background:var(--accent-solid);color:var(--on-accent);border-color:var(--accent-solid)} .btn-primary:hover:not(:disabled){background:var(--brand-500);border-color:var(--brand-500)} .btn-secondary{background:var(--panel-2);color:var(--text);border-color:var(--border)} .btn-secondary:hover:not(:disabled){border-color:var(--border-strong);background:var(--hover)} .btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)} .btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--accent);background:var(--brand-ghost)} .btn-danger{background:transparent;color:var(--danger);border-color:var(--danger-soft)} .btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)} .btn-sm{min-height:34px;padding:7px 12px;font-size:var(--t-sm)} .btn-lg{min-height:50px;padding:14px 22px;font-size:var(--t-md)} .btn-block{width:100%} /* ── Chips ── */ .chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 11px;border-radius:var(--r-full); font-size:var(--t-sm);font-weight:600; background:var(--panel-2);color:var(--text-2); border:1px solid var(--border); transition:all var(--dur-fast) ease; } .chip-interactive{cursor:pointer} .chip-interactive:hover{color:var(--text);border-color:var(--border-strong)} .chip.is-active{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent)} .chip-live{background:var(--live-soft);color:var(--live);border-color:transparent} .chip-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} /* ── Cards & surfaces ── */ .card{ background:var(--panel);border:1px solid var(--border); border-radius:var(--r-lg);padding:var(--s-4); } .card-flush{padding:0;overflow:hidden} .surface{background:var(--panel-2);border-radius:var(--r-md)} /* ── Labels ── */ .label{ font-size:var(--t-2xs);font-weight:700; text-transform:uppercase;letter-spacing:.09em; color:var(--text-3); } /* ── Inputs ── */ .input{ width:100%;padding:11px 13px;min-height:44px; background:var(--panel-2);color:var(--text); border:1px solid var(--border);border-radius:var(--r-md); font-size:16px; /* never below 16px: iOS zooms the viewport on focus */ transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .input::placeholder{color:var(--text-3)} .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--brand-ring)} /* ── Price pill, the product's signature object ── */ .price-pill{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:var(--r-sm); font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em; border:1.5px solid; } .price-pill.cheap{background:var(--price-cheap);color:var(--price-cheap-ink);border-color:var(--price-cheap-edge)} .price-pill.mid {background:var(--price-mid); color:var(--price-mid-ink); border-color:var(--price-mid-edge)} .price-pill.dear {background:var(--price-dear); color:var(--price-dear-ink); border-color:var(--price-dear-edge)} /* ── Skeletons ── */ @keyframes pp-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} } .skeleton{ background:linear-gradient(90deg, var(--panel-2) 25%, var(--border) 37%, var(--panel-2) 63%); background-size:200% 100%; animation:pp-shimmer 1.3s linear infinite; border-radius:var(--r-sm); } /* ── NO ITALICS ── An oblique is close to the least legible thing a small screen can ask somebody to read: the slant costs stroke contrast, the letterforms change shape rather than just leaning, and readers with dyslexia lose more from it than anybody. Emphasis here is carried by weight and colour, so these tags keep the meaning a screen reader announces and lose the slant. */ em,i,cite,dfn,var,address{font-style:normal} /* Rows of skeleton, the shape of a list that is on its way. See ppSkeleton() in shared.js, every list in the app waits the same way now. */ .pp-skel{display:grid;gap:var(--s-2)} .pp-skel-row{border-radius:var(--r-lg)} /* ── Sheet grab handle ── */ .sheet-grab{ flex-shrink:0;display:none;padding:9px 0 3px;cursor:grab;touch-action:none; } .sheet-grab::before{ content:"";display:block;width:38px;height:4px;margin:0 auto; background:var(--border-strong);border-radius:var(--r-full); transition:background var(--dur-fast) ease,width var(--dur-fast) ease; } .sheet-grab:active::before{background:var(--text-3);width:48px} .dragging{transition:none!important} @media (max-width:600px){ .sheet-grab{display:block} } /* ══════════════════════════════════════════════════════════════════════════ SWIPE DOWN TO CLOSE The handle makeDismissable() inserts at the top of every overlay in the app. Two jobs, and the second is the important one: it is the drag surface, and it is the only thing on screen that says the drag exists. A gesture nobody knows about is not a feature. Shown at every width, unlike .sheet-grab above. A trackpad drag is a real gesture on a laptop, the handle is what advertises it, and hiding it on desktop would mean the panel behaves one way on a phone and another on a machine with a touchscreen that reports as a desktop, which is most Windows laptops sold. ══════════════════════════════════════════════════════════════════════════ */ .pp-grab{ flex-shrink:0;padding:9px 0 5px;cursor:grab; /* Non-negotiable. Without it the browser claims a vertical drag for scrolling before a single pointermove is delivered, and the handle does nothing at all inside any panel whose body scrolls. */ touch-action:none; } .pp-grab::before{ content:"";display:block;width:38px;height:4px;margin:0 auto; background:var(--border-strong);border-radius:var(--r-full); transition:background var(--dur-fast) ease,width var(--dur-fast) ease; } .pp-grab:hover::before{background:var(--text-3)} .pp-grab:active{cursor:grabbing} .pp-grab:active::before{background:var(--text-3);width:52px} /* The panels that ship their own handle get the same touch-action, or the gesture dies for exactly the sheets that looked most ready for it. */ .sheet-grab.pp-grab-live,.wo-drawer-handle.pp-grab-live{touch-action:none;cursor:grab} /* Following a finger is the one animation that must not be animated: a transition here turns a 1:1 drag into a laggy one. */ .pp-dragging{transition:none!important;will-change:translate,opacity} /* Nothing inside a panel being dragged should be selecting text or firing a hover state on the way past. */ .pp-dragging *{pointer-events:none} /* ── LETTING GO WITHOUT DISMISSING ── A drag that does not travel far enough has to land back at rest, and it has to be animated or the panel teleports. Applied for the length of that one animation and then removed, deliberately: a permanent transition on these elements would override the open- and close-animations each panel already defines for itself, which are not all the same and not all only transform. */ .pp-snapping{ transition:translate var(--dur) var(--ease-out),opacity var(--dur) ease!important; } @media (prefers-reduced-motion:reduce){ .pp-snapping{transition:none!important} } /* ── Toast ── Both pages' toasts, one definition. Neutral panel rather than a filled brand pill: green is the price ramp's and the brand's, and a message that says "Couldn't post your event" should not arrive in the colour the app uses for a cheap pint. Errors get the danger edge and nothing else, so the two read apart at a glance without shouting. */ .toast,.app-toast{ position:fixed;left:50%; bottom:calc(var(--tabbar-safe) + 12px); transform:translateX(-50%) translateY(12px); max-width:min(440px, calc(100vw - 32px)); padding:11px 18px; border-radius:var(--r-full); border:1px solid var(--border-strong); background:var(--panel-2); color:var(--text); font-size:var(--t-base);font-weight:600;line-height:1.35;text-align:center; box-shadow:var(--shadow-3); z-index:var(--z-toast); opacity:0;pointer-events:none; transition:opacity var(--dur) ease, transform var(--dur) var(--ease-out); } .toast.show,.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* A border and a wash rather than red text: the message still has to be read in a dark bar, and a whole toast in --danger is harder to read than the thing it is telling you about. A 3px left edge was tried first and a left border on a fully rounded pill draws a crescent, which looks like a bug. */ .toast.is-error,.app-toast.is-error{ border-color:var(--danger); background:linear-gradient(var(--danger-soft),var(--danger-soft)),var(--panel-2); } @media (prefers-reduced-motion:reduce){ .toast,.app-toast{transition:opacity var(--dur) ease;transform:translateX(-50%)} .toast.show,.app-toast.show{transform:translateX(-50%)} } /* ── Divider ── */ .rule{height:1px;background:var(--border);border:none;margin:var(--s-4) 0} /* ═══════════════════════════════════════════════════════════════════════════ SHARED MOTION ═══════════════════════════════════════════════════════════════════════════ */ @keyframes pp-row-in{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} } @keyframes pp-fade-in{ from{opacity:0} to{opacity:1} } @keyframes pp-pop-in{ from{opacity:0;transform:translateY(-6px) scale(.82)} to{opacity:1;transform:none} } @keyframes pp-pulse{ 0%{box-shadow:0 0 0 0 var(--live-glow)} 70%{box-shadow:0 0 0 7px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} } @keyframes pp-tick{ 0%{transform:translateY(0)} 40%{transform:translateY(-4px);opacity:.55} 100%{transform:translateY(0)} } .stagger > *{ animation:pp-row-in var(--dur) var(--ease-out) both; animation-delay:calc(var(--i,0) * 22ms); } /* ═══════════════════════════════════════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .btn:active:not(:disabled){transform:none} } .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ═══════════════════════════════════════════════════════════════════════════ MAP SURFACE Leaflet ships light chrome that fought the dark UI. Everything below is token-driven so the map matches whichever theme is active. ═══════════════════════════════════════════════════════════════════════════ */ .leaflet-container{background:var(--bg-deep)!important;font-family:var(--font-sans)!important} .leaflet-control-zoom{ border:1px solid var(--border)!important; border-radius:var(--r-md)!important; overflow:hidden;box-shadow:var(--shadow-2)!important; } .leaflet-control-zoom a{ background:var(--panel)!important;color:var(--text-2)!important; border-bottom:1px solid var(--border)!important; width:36px!important;height:36px!important;line-height:34px!important; font-size:19px!important;transition:all var(--dur-fast) ease; } .leaflet-control-zoom a:last-child{border-bottom:none!important} .leaflet-control-zoom a:hover{background:var(--hover)!important;color:var(--accent)!important} .leaflet-control-zoom a.leaflet-disabled{opacity:.4!important} .leaflet-control-attribution{ background:var(--glass)!important; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:var(--text-3)!important; font-size:12px!important; border-top-left-radius:var(--r-sm); padding:2px 7px!important; } .leaflet-control-attribution a{color:var(--text-2)!important} .leaflet-popup-content-wrapper{ background:var(--panel)!important;color:var(--text)!important; border:1px solid var(--border)!important; border-radius:var(--r-lg)!important; box-shadow:var(--shadow-3)!important; } .leaflet-popup-tip{background:var(--panel)!important;border:1px solid var(--border)!important} .leaflet-popup-close-button{color:var(--text-3)!important} .leaflet-popup-close-button:hover{color:var(--text)!important} /* ── THE FILTER THAT USED TO BE ON THE WHOLE TILE PANE ──────────────────── `.leaflet-tile-pane { filter: saturate(.5) … }` lived here to desaturate CARTO's PNGs, so the basemap stayed background and the price pins stayed the most saturated thing on the map. It had to go, for two reasons and either would have been enough. The first is that it does not work any more and fails silently: the basemap is a WebGL canvas now, and a CSS filter on an ancestor of one takes the canvas out of the compositing path that draws it. The map went completely black, no error, no warning, correct DOM, correct canvas size, MapLibre reporting the motorways it was drawing into a buffer nobody was showing. The second is that it was always the wrong layer to fix it on. Correcting a picture of a map with a colour filter is what you do when the picture is all you have. It is not: the style is JSON we can edit, so if the basemap is too loud the answer is to say so in the style rather than to wash the whole pane, including, as it happens, everything Leaflet ever puts in that pane. The raster fallback is a picture of a map, so it keeps a filter, on its own layer, where it cannot reach a canvas. See .pp-basemap-raster below. */ /* Crawl route */ .crawl-route{filter:drop-shadow(0 0 6px var(--brand-ring))} /* =========================================================================== THE ICON SET This app drew its icons in emoji: 495 of them, twelve in the tab bar alone. Emoji are somebody else's artwork, redrawn by every operating system. A beer mug is a different beer mug on Android, on Windows and on an iPhone, sitting on a different baseline at a different weight, carrying colours picked by a font designer who had never seen this palette. Twelve of them in a row across the bottom of every screen is the single loudest thing in the product, and none of it was designed. They were replaced by a set drawn here, by hand, on one 24x24 grid at one stroke width. That fixed the operating system problem and created a slower one: ninety icons drawn one at a time by whoever needed the next one, under a comment asking them to match a stroke they could only match by eye. A boot drawn in March and a bus drawn in September are two people's idea of the same line, and the tab bar is where the disagreement shows. So the artwork is Google's. Material Symbols, Rounded, weight 400, Apache 2.0, unmodified, generated into the block below by scripts/build-icons.py from the files in scripts/material-symbols/. Rounded rather than Outlined because everything else here has a radius on it, and a square-cornered icon sitting in a pill-shaped button is the kind of mismatch nobody can name and everybody can see. WHY MASKS AND NOT ----------------------- The same technique the Celtic plait already uses (see --knot-svg): the icon is a mask and `background-color: currentColor` fills it, so an icon is the colour of the text it sits with, everywhere, with no `fill` to keep in step. It is also what lets one file carry the whole set: Material Symbols ship as a variable font, and loading one would mean either a request to Google on every page or a 200KB binary in the repo for the ninety glyphs used out of seven thousand. These are 40KB of CSS the pages already fetch, and they work in an app that has never seen a network. The alternatives were both worse for a site with no build step. An inline per use is the markup repeated 96 times across eight pages for the tab bar alone. A sprite with needs the sprite in the document before the icons resolve, which means either injecting it from JavaScript, and the tab bar is server-rendered HTML that would flash empty, or pasting the same block into eight files. ADDING ONE ---------- A line in ICONS in scripts/build-icons.py, the matching .svg copied into scripts/material-symbols/, and `python scripts/build-icons.py --write`. Never edit the block below: it is generated, and the next run overwrites it. =========================================================================== */ .ic{ display:inline-block;flex-shrink:0; width:1em;height:1em; background-color:currentColor; -webkit-mask-image:var(--i);mask-image:var(--i); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; vertical-align:-.125em; } /* GENERATED BY scripts/build-icons.py, DO NOT EDIT BY HAND */ :root{ --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M220-180h150v-220q0-12.75 8.63-21.38Q387.25-430 400-430h160q12.75 0 21.38 8.62Q590-412.75 590-400v220h150v-390L480-765 220-570v390Zm-60 0v-390q0-14.25 6.38-27 6.37-12.75 17.62-21l260-195q15.68-12 35.84-12Q500-825 516-813l260 195q11.25 8.25 17.63 21 6.37 12.75 6.37 27v390q0 24.75-17.62 42.37Q764.75-120 740-120H560q-12.75 0-21.37-8.63Q530-137.25 530-150v-220H430v220q0 12.75-8.62 21.37Q412.75-120 400-120H220q-24.75 0-42.37-17.63Q160-155.25 160-180Zm320-293Z'/%3E%3C/svg%3E"); /* home */ --ic-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m592-127-243-86-188 75q-8 3-15 1.5t-13-5.5q-6-4-9.5-10t-3.5-14v-565q0-13 7.5-23t19.5-15l182-64q5-2 10-2.5t10-.5q5 0 10 .5t10 2.5l243 85 187-75q8-3 15-2t13 5q6 4 9.5 10.5T840-795v572q0 11-7.5 19T814-192l-182 65q-5 2-10 2.5t-10 .5q-5 0-10-.5t-10-2.5Zm-14-68v-505l-196-66v505l196 66Zm60 0 142-47v-512l-142 54v505Zm-458-12 142-54v-505l-142 47v512Zm458-493v505-505Zm-316-66v505-505Z'/%3E%3C/svg%3E"); /* map */ --ic-pint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M310-180h300v-430h-90q-28 0-47 15.5T430-552q-26 29-57 51t-63 30v291Zm-60 0v-292q-52-14-91-53t-39-95.18q0-53.17 30.5-94.3 30.5-41.13 78.5-57.18 23-48.15 68.5-78.24Q343-880 400-880q35 0 65.5 12t55.5 33q10-2 19-3.5t20-1.5q66 0 113 47t47 113q0 22-9 44t-23 36h92q24.75 0 42.38 17.62Q840-564.75 840-540v280q0 24.75-17.62 42.37Q804.75-200 780-200H670v20q0 24.75-17.62 42.37Q634.75-120 610-120H310q-24.75 0-42.37-17.63Q250-155.25 250-180Zm-70-440q0 38 31 64t69 26q32 0 58-17.5t53-50.5q23-28 55-50t74-22h140q0-45-26.5-77.5T560-780q-18 0-35.5 5.5L507-769l-19-16q-18-16-41-25.5t-47-9.5q-35 0-67 18t-47 50l-14 30-32 11q-26 9-43 36t-17 55Zm490 360h110v-280H670v280Zm-360 80h300-300Z'/%3E%3C/svg%3E"); /* sports_bar */ --ic-pint-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M250-180v-292q-52-14-91-53t-39-95q0-53 30.5-94.5T229-772q23-48 68.5-78T400-880q35 0 65.5 12t55.5 33q10-2 19-3.5t20-1.5q66 0 113 47t47 113q0 22-9 44t-23 36h92q25 0 42.5 17.5T840-540v280q0 25-17.5 42.5T780-200H670v20q0 25-17.5 42.5T610-120H310q-25 0-42.5-17.5T250-180Zm-70-440q0 38 31 64t69 26q32 0 58-17.5t53-50.5q23-28 55-50t74-22h140q0-45-26.5-77.5T560-780q-18 0-35.5 5.5L507-769l-19-16q-18-16-41-25.5t-47-9.5q-35 0-67 18t-47 50l-14 30-32 11q-26 9-43 36t-17 55Zm490 360h110v-280H670v280Z'/%3E%3C/svg%3E"); /* sports_bar-fill */ --ic-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M863-404 557-97q-9 8.5-20.25 12.75T514.25-80Q503-80 492-84.5T472-97L98-472q-8-8-13-18.96-5-10.95-5-23.04v-306q0-24.75 17.63-42.38Q115.25-880 140-880h307q12.07 0 23.39 4.87Q481.7-870.25 490-862l373 373q9.39 9 13.7 20.25 4.3 11.25 4.3 22.5t-4.5 22.75Q872-412 863-404ZM516-138l306-307-375-375H140v304l376 378ZM245-664q21 0 36.5-15.5T297-716q0-21-15.5-36.5T245-768q-21 0-36.5 15.5T193-716q0 21 15.5 36.5T245-664Zm236 185Z'/%3E%3C/svg%3E"); /* sell */ --ic-feed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M142-142q-22-22-22-53t22-53q22-22 53-22t53 22q22 22 22 53t-22 53q-22 22-53 22t-53-22Zm613 22q-20 0-32.5-14T708-168q-9-109-54-203T537-537q-72-72-166-117t-203-54q-20-2-34-14.5T120-755q0-20 15-32.5t35-10.5q127 9 236.5 60.5T601-601q85 85 136.5 194.5T798-170q2 20-10.5 35T755-120Zm-258 0q-19 0-32.5-13.5T449-167q-8-57-32-106t-62-87q-38-38-85.5-63.5T166-457q-19-3-32.5-16T120-505q0-19 13.5-32t31.5-11q75 8 139.5 40.5T419-424q50 51 81.5 117.5T540-165q2 19-11 32t-32 13Z'/%3E%3C/svg%3E"); /* rss_feed */ --ic-trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M450-180v-148q-54-11-96-46.5T296-463q-74-8-125-60t-51-125v-44q0-24.75 17.63-42.38Q155.25-752 180-752h104v-28q0-24.75 17.63-42.38Q319.25-840 344-840h272q24.75 0 42.38 17.62Q676-804.75 676-780v28h104q24.75 0 42.38 17.62Q840-716.75 840-692v44q0 73-51 125t-125 60q-16 53-58 88.5T510-328v148h122q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H328q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h122ZM284-526v-166H180v44q0 45 29.5 78.5T284-526Zm292.5 101.04Q616-464.92 616-522v-258H344v258q0 57.08 39.74 97.04Q423.47-385 480.24-385q56.76 0 96.26-39.96ZM676-526q45-10 74.5-43.5T780-648v-44H676v166Zm-196-57Z'/%3E%3C/svg%3E"); /* trophy */ --ic-trophy-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M284-526v-166H180v44q0 45 29.5 78.5T284-526Zm392 0q45-10 74.5-43.5T780-648v-44H676v166ZM450-180v-148q-54-11-96-46.5T296-463q-74-8-125-60t-51-125v-44q0-24.75 17.63-42.38Q155.25-752 180-752h104v-28q0-24.75 17.63-42.38Q319.25-840 344-840h272q24.75 0 42.38 17.62Q676-804.75 676-780v28h104q24.75 0 42.38 17.62Q840-716.75 840-692v44q0 73-51 125t-125 60q-16 53-58 88.5T510-328v148h122q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H328q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h122Z'/%3E%3C/svg%3E"); /* trophy-fill */ --ic-boot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M420-379 351-65q-2 11-11 18t-20 7q-15 0-24.5-11.5T289-77l114-583q5-24 23-37t38-13q20 0 37.5 9t28.5 26l39 64q19 32 52.5 57t78.5 39v-55q0-8 6-14t14-6q8 0 14 6t6 14v510q0 8-6 14t-14 6q-8 0-14-6t-6-14v-394q-51-11-96-39t-80-69l-29 145 76 72q5 5 7 10.5t2 11.5v253q0 13-8.5 21.5T550-40q-13 0-21.5-8.5T520-70v-214l-100-95Zm-150-69-46-9q-12-2-18.5-12.5T201-492l30-157q5-29 31-44.5t57-9.5q12 2 19 13t5 23l-38 195q-2 12-12.5 19t-22.5 5Zm208.5-327.5Q457-797 457-827t21.5-51.5Q500-900 530-900t51.5 21.5Q603-857 603-827t-21.5 51.5Q560-754 530-754t-51.5-21.5Z'/%3E%3C/svg%3E"); /* hiking */ --ic-passport:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M730-450q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H610q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5h120Zm0-120q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H610q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5h120ZM360-434q-38 0-66.64 6.5Q264.73-421 243-407q-20 11-31 28.13-11 17.14-11 36.87 0 9.43 6.68 15.71Q214.35-320 224-320h272q9.65 0 16.32-6.52Q519-333.03 519-343q0-17.69-10.5-34.35Q498-394 478-407q-22-14-51-20.5t-67-6.5Zm51.5-81.42q21.5-21.42 21.5-51.5t-21.42-51.58q-21.42-21.5-51.5-21.5t-51.58 21.42q-21.5 21.42-21.5 51.5t21.42 51.58q21.42 21.5 51.5 21.5t51.58-21.42ZM140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm0-60h680v-520H140v520Zm0 0v-520 520Z'/%3E%3C/svg%3E"); /* id_card */ --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-28q0-13.6 9-22.8 9-9.2 23.02-9.2t23.5 9.2Q310-861.6 310-848v28h340v-28q0-13.6 9-22.8 9-9.2 23.02-9.2t23.5 9.2Q715-861.6 715-848v28h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Zm300 230q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E"); /* calendar_month */ --ic-dice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M335.5-264.62q14.5-14.62 14.5-35.5 0-20.88-14.62-35.38-14.62-14.5-35.5-14.5-20.88 0-35.38 14.62-14.5 14.62-14.5 35.5 0 20.88 14.62 35.38 14.62 14.5 35.5 14.5 20.88 0 35.38-14.62Zm0-360q14.5-14.62 14.5-35.5 0-20.88-14.62-35.38-14.62-14.5-35.5-14.5-20.88 0-35.38 14.62-14.5 14.62-14.5 35.5 0 20.88 14.62 35.38 14.62 14.5 35.5 14.5 20.88 0 35.38-14.62Zm180 180q14.5-14.62 14.5-35.5 0-20.88-14.62-35.38-14.62-14.5-35.5-14.5-20.88 0-35.38 14.62-14.5 14.62-14.5 35.5 0 20.88 14.62 35.38 14.62 14.5 35.5 14.5 20.88 0 35.38-14.62Zm180 180q14.5-14.62 14.5-35.5 0-20.88-14.62-35.38-14.62-14.5-35.5-14.5-20.88 0-35.38 14.62-14.5 14.62-14.5 35.5 0 20.88 14.62 35.38 14.62 14.5 35.5 14.5 20.88 0 35.38-14.62Zm0-360q14.5-14.62 14.5-35.5 0-20.88-14.62-35.38-14.62-14.5-35.5-14.5-20.88 0-35.38 14.62-14.5 14.62-14.5 35.5 0 20.88 14.62 35.38 14.62 14.5 35.5 14.5 20.88 0 35.38-14.62ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z'/%3E%3C/svg%3E"); /* casino */ --ic-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m330-311 213-66q14-5 24-15t15-24l66-213q3-8.64-3.5-15.32T629-648l-213 66q-14 5-24 15t-15 24l-66 213q-3 8.64 3.5 15.32T330-311Zm149.76-129q-16.76 0-28.26-11.74-11.5-11.73-11.5-28.5 0-16.76 11.74-28.26 11.73-11.5 28.5-11.5 16.76 0 28.26 11.74 11.5 11.73 11.5 28.5 0 16.76-11.74 28.26-11.73 11.5-28.5 11.5Zm.51 360q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.22-60Q622-140 721-239.49q99-99.48 99-241Q820-622 721-721t-240.51-99q-141.52 0-241 99Q140-622 140-480.49q0 141.52 99.49 241 99.48 99.49 241 99.49ZM480-480Z'/%3E%3C/svg%3E"); /* explore */ --ic-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M421-80q-14 0-25-9t-13-23l-15-94q-19-7-40-19t-37-25l-86 40q-14 6-28 1.5T155-226L97-330q-8-13-4.5-27t15.5-23l80-59q-2-9-2.5-20.5T185-480q0-9 .5-20.5T188-521l-80-59q-12-9-15.5-23t4.5-27l58-104q8-13 22-17.5t28 1.5l86 40q16-13 37-25t40-18l15-95q2-14 13-23t25-9h118q14 0 25 9t13 23l15 94q19 7 40.5 18.5T669-710l86-40q14-6 27.5-1.5T804-734l59 104q8 13 4.5 27.5T852-580l-80 57q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l80 58q12 8 15.5 22.5T863-330l-58 104q-8 13-22 17.5t-28-1.5l-86-40q-16 13-36.5 25.5T592-206l-15 94q-2 14-13 23t-25 9H421Zm15-60h88l14-112q33-8 62.5-25t53.5-41l106 46 40-72-94-69q4-17 6.5-33.5T715-480q0-17-2-33.5t-7-33.5l94-69-40-72-106 46q-23-26-52-43.5T538-708l-14-112h-88l-14 112q-34 7-63.5 24T306-642l-106-46-40 72 94 69q-4 17-6.5 33.5T245-480q0 17 2.5 33.5T254-413l-94 69 40 72 106-46q24 24 53.5 41t62.5 25l14 112Zm44-210q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm0-130Z'/%3E%3C/svg%3E"); /* settings */ --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-159q133-121 196.5-219.5T740-552q0-118-75.5-193T480-820q-109 0-184.5 75T220-552q0 75 65 173.5T480-159Zm-21.5 55.5Q448-107 440-115q-42-38-91-87.5T258-309q-42-57-70-119t-28-124q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 62-28 124t-70 119q-42 57-91 106.5T520-115q-8 8-18.5 11.5T480-100q-11 0-21.5-3.5ZM480-560Zm49.5 49.5Q550-531 550-560t-20.5-49.5Q509-630 480-630t-49.5 20.5Q410-589 410-560t20.5 49.5Q451-490 480-490t49.5-20.5Z'/%3E%3C/svg%3E"); /* location_on */ --ic-pin-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M458.5-103.5Q448-107 440-115q-42-38-91-87.5T258-309q-42-57-70-119t-28-124q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 62-28 124t-70 119q-42 57-91 106.5T520-115q-8 8-18.5 11.5T480-100q-11 0-21.5-3.5Zm71-407Q550-531 550-560t-20.5-49.5Q509-630 480-630t-49.5 20.5Q410-589 410-560t20.5 49.5Q451-490 480-490t49.5-20.5Z'/%3E%3C/svg%3E"); /* location_on-fill */ --ic-pin-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M450-530v90q0 12.75 8.68 21.37 8.67 8.63 21.5 8.63 12.82 0 21.32-8.63 8.5-8.62 8.5-21.37v-90h90q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5h-90v-90q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62-8.5 8.63-8.5 21.38v90h-90q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5h90Zm30 371q133-121 196.5-219.5T740-552q0-117.79-75.5-192.9Q589-820 480-820t-184.5 75.1Q220-669.79 220-552q0 75 65 173.5T480-159Zm-21.5 55.5Q448-107 440-115q-42-38-91-87.5T258-309q-42-57-70-119t-28-124q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 62-28 124t-70 119q-42 57-91 106.5T520-115q-8 8-18.75 11.5t-21.5 3.5q-10.75 0-21.25-3.5ZM480-560Z'/%3E%3C/svg%3E"); /* add_location */ --ic-locate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M450-72v-45q-137-14-228-105T117-450H72q-13 0-21.5-8.5T42-480q0-13 8.5-21.5T72-510h45q14-137 105-228t228-105v-45q0-13 8.5-21.5T480-918q13 0 21.5 8.5T510-888v45q137 14 228 105t105 228h45q13 0 21.5 8.5T918-480q0 13-8.5 21.5T888-450h-45q-14 137-105 228T510-117v45q0 13-8.5 21.5T480-42q-13 0-21.5-8.5T450-72Zm244.5-193.5Q784-355 784-480t-89.5-214.5Q605-784 480-784t-214.5 89.5Q176-605 176-480t89.5 214.5Q355-176 480-176t214.5-89.5Zm-321-108Q330-417 330-480t43.5-106.5Q417-630 480-630t106.5 43.5Q630-543 630-480t-43.5 106.5Q543-330 480-330t-106.5-43.5ZM544-416q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Zm-64-64Z'/%3E%3C/svg%3E"); /* my_location */ --ic-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM437-141v-82q-35 0-59-26t-24-61v-44L149-559q-5 20-7 39.5t-2 39.5q0 130 84.5 227T437-141Zm294-108q44-48 66.5-107.5T820-480q0-106-58-192.5T607-799v18q0 35-24 61t-59 26h-87v87q0 17-13.5 28T393-568h-83v88h258q17 0 28 13t11 30v127h43q29 0 51 17t30 44Z'/%3E%3C/svg%3E"); /* public */ --ic-walk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M419-378 345-63q-2 11-10.33 17t-19.19 6Q301-40 291.5-51T285-76l109-550-101 43v103q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.82-8.91-9-8.92-9-22.09v-122q0-9.33 4.88-16.72 4.87-7.39 13.12-11.28l174.29-73.22Q438-710 453.5-711.5T484-710q17 3 29.5 10.87Q526-691.25 534-679l42 66q16 24 35.5 43t42.5 33q17 10 34.5 16t36.5 9q12.11 2.25 20.05 10.87 7.95 8.63 7.95 21.38 0 12.75-8.78 21.25T723-452q-59-7-105.5-35.5T533-568l-38 152 82 74q5 4.55 7.5 10.24T587-320v250q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q527-57.25 527-70v-210l-108-98Zm69.5-397.42q-21.5-21.42-21.5-51.5t21.42-51.58q21.42-21.5 51.5-21.5t51.58 21.42q21.5 21.42 21.5 51.5t-21.42 51.58q-21.42 21.5-51.5 21.5t-51.58-21.42Z'/%3E%3C/svg%3E"); /* directions_walk */ --ic-route:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M245-165.53Q200-211.06 200-275v-349q-35-13-57.5-41.26-22.5-28.27-22.5-64.41Q120-776 152.5-808t78-32q45.5 0 77.5 32.14t32 78.05q0 35.81-22.5 64.31T260-624v349q0 39.19 27.5 67.09Q315-180 355.5-180t67.5-27.91q27-27.9 27-67.09v-410q0-65 45-110t110-45q65 0 110 45t45 110v349q35 13 57.5 41.36Q840-266.27 840-230q0 45-32.08 77.5Q775.83-120 730-120q-45 0-77.5-32.5T620-230q0-36.3 22.5-65.15Q665-324 700-336v-349q0-40-27.5-67.5T605-780q-40 0-67.5 27.5T510-685v410q0 63.94-45 109.47T355-120q-65 0-110-45.53ZM230.5-680q20.5 0 35-15t14.5-35.5q0-20.5-14.37-35Q251.25-780 230-780q-20 0-35 14.37-15 14.38-15 35.63 0 20 15 35t35.5 15Zm500 500q20.5 0 35-15t14.5-35.5q0-20.5-14.37-35Q751.25-280 730-280q-20 0-35 14.37-15 14.38-15 35.63 0 20 15 35t35.5 15ZM230-730Zm500 500Z'/%3E%3C/svg%3E"); /* route */ --ic-bus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M302-202v39q0 18-12.5 30.5T259-120q-18 0-30.5-12.5T216-163v-68q-29-16-42.5-46T160-341v-397q0-74 76.5-108T481-880q166 0 242.5 34T800-738v397q0 34-13.5 64T744-231v68q0 18-12.5 30.5T701-120q-18 0-30.5-12.5T658-163v-39H302Zm179-562h259-520 261Zm177 293H220h520-82Zm-438-60h520v-173H220v173Zm145 203q16-16 16-39t-16-39q-16-16-39-16t-39 16q-16 16-16 39t16 39q16 16 39 16t39-16Zm308 0q16-16 16-39t-16-39q-16-16-39-16t-39 16q-16 16-16 39t16 39q16 16 39 16t39-16ZM220-764h520q-24-26-92-41t-167-15q-118 0-181 13.5T220-764Zm82 502h356q35 0 58.5-27t23.5-62v-120H220v120q0 35 23.5 62t58.5 27Z'/%3E%3C/svg%3E"); /* directions_bus */ --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M240-240 131-131q-14 14-32.5 6.34Q80-132.31 80-152v-668q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H240Zm-26-60h606v-520H140v600l74-80Zm-74 0v-520 520Z'/%3E%3C/svg%3E"); /* chat_bubble */ --ic-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M372-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42ZM160-220v-34q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5T731-360q31 14 50 41t19 65v34q0 25-17.5 42.5T740-160H220q-25 0-42.5-17.5T160-220Zm60 0h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm324.5-346.5Q570-592 570-631t-25.5-64.5Q519-721 480-721t-64.5 25.5Q390-670 390-631t25.5 64.5Q441-541 480-541t64.5-25.5ZM480-631Zm0 411Z'/%3E%3C/svg%3E"); /* person */ --ic-people:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M38-254q0-35 18-63.5t50-42.5q73-32 131.5-46T358-420q62 0 120 14t131 46q32 14 50.5 42.5T678-254v34q0 25-17.5 42.5T618-160H98q-25 0-42.5-17.5T38-220v-34Zm824 94H724q5-15 9.5-29.5T738-220v-34q0-63-29-101.5T622-420q69 8 130 22t99 34q33 19 52 47t19 63v34q0 25-17.5 42.5T862-160ZM250-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42Zm426 0q-42 42-108 42-11 0-24.5-1.5T519-488q24-25 36.5-61.5T568-631q0-45-12.5-79.5T519-774q11-3 24.5-5t24.5-2q66 0 108 42t42 108q0 66-42 108ZM98-220h520v-34q0-16-9.5-31T585-306q-72-32-121-43t-106-11q-57 0-106.5 11T130-306q-14 6-23 21t-9 31v34Zm324.5-346.5Q448-592 448-631t-25.5-64.5Q397-721 358-721t-64.5 25.5Q268-670 268-631t25.5 64.5Q319-541 358-541t64.5-25.5ZM358-220Zm0-411Z'/%3E%3C/svg%3E"); /* group */ --ic-handshake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M475-140q5 0 11.5-2.5T497-149l337-338q13-13 19.5-29.5T860-550q0-17-6.5-34T834-614L654-794q-13-13-30-19.5t-34-6.5q-17 0-33.5 6.5T527-794l-18 18 81 82q13 14 23 32.5t10 40.5q0 38-29.5 67T526-525q-25 0-41.5-7.5T454-554l-73-73-181 181q-5 5-7 10.5t-2 11.5q0 13 8.5 21.5T221-394q6 0 11.5-3t9.5-7l117-117q9-9 21-9t21 9q9 9 9 21t-9 21L285-363q-5 5-7 11t-2 12q0 12 9 21t21 9q6 0 11.5-2.5t9.5-6.5l117-117q9-9 21-9t21 9q9 9 9 21t-9 21L370-278q-4 4-6.5 10.5T361-255q0 12 9 21t21 9q6 0 11-2t10-7l117-117q9-9 21-9t21 9q9 9 9 21t-9 21L454-192q-5 5-7 11t-2 11q0 14 8 22t22 8Zm0 60q-33 0-59-24.5T385-165q-34-5-57-28t-28-57q-34-5-56.5-28.5T216-335q-37-5-61-30t-24-60q0-17 6.5-34t19.5-30l182-182q17-17 42-17t42 17l68 68q8 8 17.5 12.5T527-586q13 0 24.5-11.5T563-622q0-6-3.5-13.5T548-651L405-794q-13-13-30-19.5t-34-6.5q-17 0-33.5 6.5T278-794L126-642q-20 20-24.5 48.5T108-539q5 11 0 22.5T92-500q-11 5-23 0t-17-16q-17-45-10-89.5T84-685l151-151q22-22 50-32.5t57-10.5q29 0 56.5 10.5T448-836l18 18 18-18q22-22 50-32.5t57-10.5q29 0 56.5 10.5T697-836l179 179q22 22 33 50t11 57q0 29-11 56.5T876-444L539-107q-13 13-29.5 20T475-80Zm-97-546Z'/%3E%3C/svg%3E"); /* handshake */ --ic-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M690-40q-12 0-21-8.9-9-8.89-9-21.5 0-12.6 8.63-21.1 8.62-8.5 21.37-8.5 72 0 121-49.5T860-270q0-13 8.69-21.5t21-8.5q12.31 0 21.31 8.78 9 8.78 9 21.22 0 96-67.28 163T690-40ZM70-659q-12.44 0-21.22-9T40-689q0-95.85 67.28-163.43Q174.56-920 270-920q12.85 0 21.93 9 9.07 9 9.07 21.31 0 12.31-8.5 21T271-860q-70.54 0-120.77 49.5Q100-761 100-690q0 13.17-8.62 22.09Q82.75-659 70-659Zm691-93q0 12-9 21L497-476q-9 9-21.1 8.58-12.1-.41-20.9-9.58-9-8.8-9-20.9 0-12.1 9-21.1l255-254q9-9 21-9t21 9q9 9 9 21Zm76 131.84q0 12.16-9 21.16L601-372q-9 9-21 8.5t-21-9.11q-9-9.39-9-21.39t9-21l226-226q9.07-9 21.53-9 12.47 0 21.47 8.84 9 8.84 9 21ZM195-199q-91-91-91.5-218T194-635l101-101q9-9 21-9t21 9l21 21q12 12 19.5 28t8.5 30l163-164q9.07-9 21.53-9 12.47 0 21.47 9.05 9 9.06 9 21.5 0 12.45-9 21.45L389-575l-65 65 26 26q42 42 40.5 100.5t-43.6 100.6l-.9.9q-9 9-21 8.5t-21-9.11q-9-9.39-9-21.49 0-12.1 9-20.9l1-1q25-25 25.5-58.5T307-442l-47-47q-9-9.07-9-21.53 0-12.47 9-21.47l56-55q17-17 17-42.5T316-672l-80 80q-73 73-72.5 175T237-242q74 74 177 75.5T590-238l241-241q9.07-9 21.53-9 12.47 0 21.47 8.84 9 8.84 9 21T874-437L633-196q-91 91-219 89.5T195-199Zm217-217Z'/%3E%3C/svg%3E"); /* waving_hand */ --ic-megaphone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M850-450h-90q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h90q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5ZM677-274q8-10 19.83-12 11.82-2 22.17 6l73 54q10 8 12 19.83 2 11.82-6 22.17-8 10-19.83 12-11.82 2-22.17-6l-73-54q-10-8-12-19.83-2-11.82 6-22.17Zm115-460-70 53q-10.35 8-22.17 6Q688-677 680-687q-8-10-6-22t12-20l70-53q10.35-8 22.17-6Q790-786 798-776q8 10 6 22t-12 20ZM210-360h-70q-24.75 0-42.37-17.63Q80-395.25 80-420v-120q0-24.75 17.63-42.38Q115.25-600 140-600h180l155-93q15-9 30-.06 15 8.93 15 26.06v374q0 17.13-15 26.06-15 8.94-30-.06l-155-93h-50v130q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-130Zm250 14v-268l-124 74H140v120h196l124 74Zm100 0v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346ZM300-480Z'/%3E%3C/svg%3E"); /* campaign */ --ic-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M814-452 162-178q-15 6-28.5-2.5T120-205v-550q0-16 13.5-24.5T162-782l652 274q18 8 18 28t-18 28ZM180-253l544-227-544-230v168l242 62-242 60v167Zm0 0v-457 457Z'/%3E%3C/svg%3E"); /* send */ --ic-sms:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M240-240 131-131q-14 14-32.5 6.34Q80-132.31 80-152v-668q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H240Zm-26-60h606v-520H140v600l74-80Zm-74 0v-520 520Zm194.5-234.5Q346-546 346-563t-11.5-28.5Q323-603 306-603t-28.5 11.5Q266-580 266-563t11.5 28.5Q289-523 306-523t28.5-11.5Zm177 0Q523-546 523-563t-11.5-28.5Q500-603 483-603t-28.5 11.5Q443-580 443-563t11.5 28.5Q466-523 483-523t28.5-11.5Zm170 0Q693-546 693-563t-11.5-28.5Q670-603 653-603t-28.5 11.5Q613-580 613-563t11.5 28.5Q636-523 653-523t28.5-11.5Z'/%3E%3C/svg%3E"); /* sms */ --ic-id:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M232-247h239v-14q0-18-9-32t-23-19q-32-11-50-14.5t-35-3.5q-19 0-40.5 4.5T265-312q-15 5-24 19t-9 32v14Zm361-67h120q11 0 18-7t7-18q0-11-7-18t-18-7H593q-11 0-18 7t-7 18q0 11 7 18t18 7Zm-200.5-65.5Q408-395 408-418t-15.5-38.5Q377-472 354-472t-38.5 15.5Q300-441 300-418t15.5 38.5Q331-364 354-364t38.5-15.5ZM593-427h120q11 0 18-7t7-18q0-11-7-18t-18-7H593q-11 0-18 7t-7 18q0 11 7 18t18 7ZM140-80q-24 0-42-18t-18-42v-480q0-24 18-42t42-18h250v-140q0-24 18-42t42-18h60q24 0 42 18t18 42v140h250q24 0 42 18t18 42v480q0 24-18 42t-42 18H140Zm0-60h680v-480H570v30q0 28-18 44t-42 16h-60q-24 0-42-16t-18-44v-30H140v480Zm310-450h60v-230h-60v230Zm30 210Z'/%3E%3C/svg%3E"); /* badge */ --ic-camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M479.5-267q72.5 0 121.5-49t49-121.5q0-72.5-49-121T479.5-607q-72.5 0-121 48.5t-48.5 121q0 72.5 48.5 121.5t121 49Zm0-60q-47.5 0-78.5-31.5t-31-79q0-47.5 31-78.5t78.5-31q47.5 0 79 31t31.5 78.5q0 47.5-31.5 79t-79 31.5ZM140-120q-24 0-42-18t-18-42v-513q0-23 18-41.5t42-18.5h147l55-66q8-11 20-16t26-5h184q14 0 26 5t20 16l55 66h147q23 0 41.5 18.5T880-693v513q0 24-18.5 42T820-120H140Zm0-60h680v-513H645l-73-87H388l-73 87H140v513Zm340-257Z'/%3E%3C/svg%3E"); /* photo_camera */ --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M378-329q-108.16 0-183.08-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l242 240q9 8.56 9 21.78T818-143q-9 9-22.22 9-13.22 0-21.78-9L533-384q-30 26-69.96 40.5Q423.08-329 378-329Zm-1-60q81.25 0 138.13-57.5Q572-504 572-585t-56.87-138.5Q458.25-781 377-781q-82.08 0-139.54 57.5Q180-666 180-585t57.46 138.5Q294.92-389 377-389Z'/%3E%3C/svg%3E"); /* search */ --ic-search-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m270-245 57 57q5 5 11.5 4.5T350-189q5-5 5-11.5t-5-11.5l-58-57 60-60q5-5 5-11.5t-5-11.5q-5-5-11.5-5t-11.5 5l-59 59-59-59q-5-5-11-5t-11 5q-5 5-5 11.5t5 11.5l58 59-58 58q-5 5-5 12t5 12q5 5 12 5t12-5l57-57ZM136-136q-56-56-56-134t56-134q56-56 134-56t134 56q56 56 56 134t-56 134q-56 56-134 56t-134-56Zm437-247q-14 11-31.5 21.5T508-344q-5-14-11-28.5T483-399q54-21 91.5-69.5T612-584q0-81-57-138.5T417-780q-82 0-139.5 57.5T220-584q0 17 3.5 35.5T232-517q-13 2-29 6.5T174-500q-7-18-10.5-40t-3.5-44q0-107 75-181.5T417-840q106 0 180.5 75T672-584q0 43-15 85t-41 73l242 240q9 9 9 22t-9 22q-9 9-22 9t-22-9L573-383Z'/%3E%3C/svg%3E"); /* search_off */ --ic-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z'/%3E%3C/svg%3E"); /* close */ --ic-cancel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m480-438 129 129q9 9 21 9t21-9q9-9 9-21t-9-21L522-480l129-129q9-9 9-21t-9-21q-9-9-21-9t-21 9L480-522 351-651q-9-9-21-9t-21 9q-9 9-9 21t9 21l129 129-129 129q-9 9-9 21t9 21q9 9 21 9t21-9l129-129Zm0 358q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z'/%3E%3C/svg%3E"); /* cancel */ --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z'/%3E%3C/svg%3E"); /* check */ --ic-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z'/%3E%3C/svg%3E"); /* chevron_right */ --ic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M469-358q-5-2-10-7L261-563q-9-9-8.5-21.5T262-606q9-9 21.5-9t21.5 9l175 176 176-176q9-9 21-8.5t21 9.5q9 9 9 21.5t-9 21.5L501-365q-5 5-10 7t-11 2q-6 0-11-2Z'/%3E%3C/svg%3E"); /* keyboard_arrow_down */ --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M450-450H230q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h220v-220q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v220h220q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H510v220q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-220Z'/%3E%3C/svg%3E"); /* add */ --ic-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M230-450q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h500q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H230Z'/%3E%3C/svg%3E"); /* remove */ --ic-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M180-180h44l472-471-44-44-472 471v44Zm-30 60q-13 0-21.5-8.5T120-150v-73q0-12 5-23.5t13-19.5l557-556q8-8 19-12.5t23-4.5q11 0 22 4.5t20 12.5l44 44q9 9 13 20t4 22q0 11-4.5 22.5T823-694L266-138q-8 8-19.5 13t-23.5 5h-73Zm629-617-41-41 41 41Zm-105 64-22-22 44 44-22-22Z'/%3E%3C/svg%3E"); /* edit */ --ic-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M261-120q-24.75 0-42.37-17.63Q201-155.25 201-180v-570h-11q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h158q0-13 8.63-21.5 8.62-8.5 21.37-8.5h204q12.75 0 21.38 8.62Q612-822.75 612-810h158q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5h-11v570q0 24.75-17.62 42.37Q723.75-120 699-120H261Zm438-630H261v570h438v-570ZM418.5-274.63q8.5-8.62 8.5-21.37v-339q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62-8.5 8.63-8.5 21.38v339q0 12.75 8.68 21.37 8.67 8.63 21.5 8.63 12.82 0 21.32-8.63Zm166 0q8.5-8.62 8.5-21.37v-339q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62-8.5 8.63-8.5 21.38v339q0 12.75 8.68 21.37 8.67 8.63 21.5 8.63 12.82 0 21.32-8.63ZM261-750v570-570Z'/%3E%3C/svg%3E"); /* delete */ --ic-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M300-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h440q24 0 42 18t18 42v560q0 24-18 42t-42 18H300Zm0-60h440v-560H300v560ZM180-80q-24 0-42-18t-18-42v-590q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v590h470q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32Q662.75-80 650-80H180Zm120-180v-560 560Z'/%3E%3C/svg%3E"); /* content_copy */ --ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M280-280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h140q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H280q-58.33 0-99.17 40.76-40.83 40.77-40.83 99Q140-422 180.83-381q40.84 41 99.17 41h140q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H280Zm75-170q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h250q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H355Zm185 170q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h140q58.33 0 99.17-40.76 40.83-40.77 40.83-99Q820-538 779.17-579q-40.84-41-99.17-41H540q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h140q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H540Z'/%3E%3C/svg%3E"); /* link */ --ic-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M686-80q-47.5 0-80.75-33.25T572-194q0-8 5-34L278-403q-16.28 17.34-37.64 27.17Q219-366 194-366q-47.5 0-80.75-33T80-480q0-48 33.25-81T194-594q24 0 45 9.3 21 9.29 37 25.7l301-173q-2-8-3.5-16.5T572-766q0-47.5 33.25-80.75T686-880q47.5 0 80.75 33.25T800-766q0 47.5-33.25 80.75T686-652q-23.27 0-43.64-9Q622-670 606-685L302-516q3 8 4.5 17.5t1.5 18q0 8.5-1 16t-3 15.5l303 173q16-15 36.09-23.5 20.1-8.5 43.07-8.5Q734-308 767-274.75T800-194q0 47.5-33.25 80.75T686-80Zm.04-60q22.96 0 38.46-15.54 15.5-15.53 15.5-38.5 0-22.96-15.54-38.46-15.53-15.5-38.5-15.5-22.96 0-38.46 15.54-15.5 15.53-15.5 38.5 0 22.96 15.54 38.46 15.53 15.5 38.5 15.5Zm-492-286q22.96 0 38.46-15.54 15.5-15.53 15.5-38.5 0-22.96-15.54-38.46-15.53-15.5-38.5-15.5-22.96 0-38.46 15.54-15.5 15.53-15.5 38.5 0 22.96 15.54 38.46 15.53 15.5 38.5 15.5ZM724.5-727.54q15.5-15.53 15.5-38.5 0-22.96-15.54-38.46-15.53-15.5-38.5-15.5-22.96 0-38.46 15.54-15.5 15.53-15.5 38.5 0 22.96 15.54 38.46 15.53 15.5 38.5 15.5 22.96 0 38.46-15.54ZM686-194ZM194-480Zm492-286Z'/%3E%3C/svg%3E"); /* share */ --ic-ios-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M220-80q-24 0-42-18t-18-42v-469q0-24 18-42t42-18h139q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H220v469h520v-469H599q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h141q24 0 42 18t18 42v469q0 24-18 42t-42 18H220Zm237.5-275.63Q449-364.25 449-377v-427l-67 67q-9 9-21 9t-21.39-9q-8.61-9-8.61-21.5t9-21.5l118-119q5-5 10.13-7 5.14-2 11-2 5.87 0 10.87 2 5 2 10 7l119 119q9 9 9 21.16t-8.61 21Q610-729 597.53-729q-12.46 0-21.53-9l-67-66v427q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Z'/%3E%3C/svg%3E"); /* ios_share */ --ic-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-160q-133 0-226.5-93.5T160-480q0-133 93.5-226.5T480-800q85 0 149 34.5T740-671v-99q0-13 8.5-21.5T770-800q13 0 21.5 8.5T800-770v194q0 13-8.5 21.5T770-546H576q-13 0-21.5-8.5T546-576q0-13 8.5-21.5T576-606h138q-38-60-97-97t-137-37q-109 0-184.5 75.5T220-480q0 109 75.5 184.5T480-220q75 0 140-39.5T717-366q5-11 16.5-16.5t22.5-.5q12 5 16 16.5t-1 23.5q-39 84-117.5 133.5T480-160Z'/%3E%3C/svg%3E"); /* refresh */ --ic-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M207.86-432Q188-432 174-446.14t-14-34Q160-500 174.14-514t34-14Q228-528 242-513.86t14 34Q256-460 241.86-446t-34 14Zm272 0Q460-432 446-446.14t-14-34Q432-500 446.14-514t34-14Q500-528 514-513.86t14 34Q528-460 513.86-446t-34 14Zm272 0Q732-432 718-446.14t-14-34Q704-500 718.14-514t34-14Q772-528 786-513.86t14 34Q800-460 785.86-446t-34 14Z'/%3E%3C/svg%3E"); /* more_horiz */ --ic-drag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M349.91-160q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm-260-250q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm-260-250q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Zm260 0q-28.91 0-49.41-20.59-20.5-20.59-20.5-49.5t20.59-49.41q20.59-20.5 49.5-20.5t49.41 20.59q20.5 20.59 20.5 49.5t-20.59 49.41q-20.59 20.5-49.5 20.5Z'/%3E%3C/svg%3E"); /* drag_indicator */ --ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M260-429v279q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-620q0-12.75 8.63-21.38Q217.25-800 230-800h289q10.5 0 18.75 6.5T548-776l14 62h208q12.75 0 21.38 8.62Q800-696.75 800-684v310q0 12.75-8.62 21.37Q782.75-344 770-344H568q-10.5 0-18.75-6T539-367l-14-62H260Zm335 25h145v-250H535q-10.5 0-18.75-6.5T506-678l-14-62H260v251h292q10.5 0 18.75 6T581-466l14 62Zm-95-168Z'/%3E%3C/svg%3E"); /* flag */ --ic-ban:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM480-140q61.01 0 117.51-20.5Q654-181 699-220L220-699q-38 46-59 102.17T140-480q0 142.37 98.81 241.19Q337.63-140 480-140Zm259-121q37-45 59-101.49 22-56.5 22-117.51 0-142.38-98.81-241.19T480-820q-60.66 0-116.83 21T261-739l478 478ZM480-480Z'/%3E%3C/svg%3E"); /* block */ --ic-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M686-450H190q-13 0-21.5-8.5T160-480q0-13 8.5-21.5T190-510h496L459-737q-9-9-9-21t9-21q9-9 21-9t21 9l278 278q5 5 7 10t2 11q0 6-2 11t-7 10L501-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l227-227Z'/%3E%3C/svg%3E"); /* arrow_forward */ --ic-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z'/%3E%3C/svg%3E"); /* circle */ --ic-circle-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E"); /* circle-fill */ --ic-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z'/%3E%3C/svg%3E"); /* check_circle */ --ic-check-circle-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m421-389-98-98q-9-9-22-9t-23 10q-9 9-9 22t9 22l122 123q9 9 21 9t21-9l239-239q10-10 10-23t-10-23q-10-9-23.5-8.5T635-603L421-389Zm59 309q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z'/%3E%3C/svg%3E"); /* check_circle-fill */ --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M92-120q-9 0-15.5-4T66-135q-4-7-4.5-14.5T66-165l388-670q5-8 11.5-11.5T480-850q8 0 14.5 3.5T506-835l388 670q5 8 4.5 15.5T894-135q-4 7-10.5 11t-15.5 4H92Zm52-60h672L480-760 144-180Zm361.5-65.5Q514-254 514-267t-8.5-21.5Q497-297 484-297t-21.5 8.5Q454-280 454-267t8.5 21.5Q471-237 484-237t21.5-8.5Zm0-111Q514-365 514-378v-164q0-13-8.5-21.5T484-572q-13 0-21.5 8.5T454-542v164q0 13 8.5 21.5T484-348q13 0 21.5-8.5ZM480-470Z'/%3E%3C/svg%3E"); /* warning */ --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M220-80q-24.75 0-42.37-17.63Q160-115.25 160-140v-434q0-24.75 17.63-42.38Q195.25-634 220-634h70v-96q0-78.85 55.61-134.42Q401.21-920 480.11-920q78.89 0 134.39 55.58Q670-808.85 670-730v96h70q24.75 0 42.38 17.62Q800-598.75 800-574v434q0 24.75-17.62 42.37Q764.75-80 740-80H220Zm0-60h520v-434H220v434Zm314.5-162.03Q557-324.06 557-355q0-30-22.67-54.5t-54.5-24.5q-31.83 0-54.33 24.5t-22.5 55q0 30.5 22.67 52.5t54.5 22q31.83 0 54.33-22.03ZM350-634h260v-96q0-54.17-37.88-92.08-37.88-37.92-92-37.92T388-822.08q-38 37.91-38 92.08v96ZM220-140v-434 434Z'/%3E%3C/svg%3E"); /* lock */ --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M390-320h180q12.75 0 21.38-8.63Q600-337.25 600-350v-140q0-12.75-8.62-21.38Q582.75-520 570-520h-10v-40q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560v40h-10q-12.75 0-21.37 8.62Q360-502.75 360-490v140q0 12.75 8.63 21.37Q377.25-320 390-320Zm40-200v-40q0-20 15-33.5t35-13.5q20 0 35 13.51 15 13.52 15 33.49v40H430Zm40.12 435q-4.56-1-9.12-3-139-47-220-168.5t-81-266.61V-719q0-19.26 10.88-34.66Q181.75-769.07 199-776l260-97q11-4 21-4t21 4l260 97q17.25 6.93 28.13 22.34Q800-738.26 800-719v195.89Q800-378 719-256.5T499-88q-4.56 2-9.12 3T480-84q-5.32 0-9.88-1Zm9.88-58q115-38 187.5-143.5T740-523v-196l-260-98-260 98v196q0 131 72.5 236.5T480-143Zm0-337Z'/%3E%3C/svg%3E"); /* shield_lock */ --ic-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M232-432q-20-20-20-48t20-48q20-20 48-20t48 20q20 20 20 48t-20 48q-20 20-48 20t-48-20Zm48 192q-100 0-170-70T40-480q0-100 70-170t170-70q72 0 126 34t85 103h344q6 0 11 2t10 7l82 82q5 5 7 10.5t2 11.5q0 6-2.5 11t-7.5 10L812-334q-4 4-9 6t-10 2q-5 0-9.5-1t-9.5-4l-69-50-70 51q-4 3-8.5 4t-9.5 1q-5 0-9.5-1.5T599-331l-57-46h-51q-25 60-78.5 98.5T280-240Zm0-60q58 0 107-38.5t63-98.5h114l54 45q-1 0 0 0h.5-.5l88-63 82 62h-.5.5l85-79 .5.5-.5-.5h.5-.5l-51-51H450q-12-56-60-96.5T280-660q-75 0-127.5 52.5T100-480q0 75 52.5 127.5T280-300Z'/%3E%3C/svg%3E"); /* key */ --ic-login:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M511-120q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h269v-600H511q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h269q24 0 42 18t18 42v600q0 24-18 42t-42 18H511Zm-26-330H150q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h333l-81-81q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l133 133q9 9 9 21t-9 21L447-326q-8.8 9-20.9 8.5-12.1-.5-21.49-9.5-8.61-9-8.61-21.5t9-21.5l80-80Z'/%3E%3C/svg%3E"); /* login */ --ic-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h269q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H180v600h269q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H180Zm545-330H390q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h333l-81-81q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l133 133q9 9 9 21t-9 21L687-326q-8.8 9-20.9 8.5-12.1-.5-21.49-9.5-8.61-9-8.61-21.5t9-21.5l80-80Z'/%3E%3C/svg%3E"); /* logout */ --ic-signal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M140-480q0 63 21 117.5t58 99.5q8 10 8.5 22.5T219-219q-9 9-22.5 8.5T174-222q-45-52-69.5-117.5T80-480q0-75 24.5-140.5T174-738q9-11 22.5-11.5T219-741q9 9 8.5 21.5T219-697q-37 45-58 99.5T140-480Zm160 0q0 29 8.5 55.5T333-376q8 11 7.5 23.5T331-331q-9 9-21 8.5T290-333q-23-30-36.5-67.5T240-480q0-42 13.5-79.5T290-627q8-10 20.5-10.5T332-629q9 9 9.5 21.5T334-584q-16 22-25 48.5t-9 55.5Zm123.5 56.5Q400-447 400-480t23.5-56.5Q447-560 480-560t56.5 23.5Q560-513 560-480t-23.5 56.5Q513-400 480-400t-56.5-23.5ZM660-480q0-29-8.5-55.5T627-584q-8-11-7.5-23.5T629-629q9-9 21-8.5t20 10.5q23 30 36.5 67.5T720-480q0 42-13.5 78.5T670-334q-8 10-20.5 10.5T628-332q-9-9-9.5-21t7.5-23q16-22 25-48.5t9-55.5Zm160 0q0-63-21-117.5T741-697q-8-10-8.5-23t8.5-22q9-9 23-8t22 12q45 53 69.5 118.5T880-480q0 74-24.5 139.5T786-222q-8 11-22 11.5t-23-8.5q-9-9-8.5-21.5T741-263q37-45 58-99.5T820-480Z'/%3E%3C/svg%3E"); /* sensors */ --ic-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M190-200q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h50v-304q0-84 49.5-150.5T420-798v-22q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v22q81 17 130.5 83.5T720-564v304h50q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H190Zm290-302Zm0 422q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM300-260h360v-304q0-75-52.5-127.5T480-744q-75 0-127.5 52.5T300-564v304Z'/%3E%3C/svg%3E"); /* notifications */ --ic-bell-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M190-200q-13 0-21.5-8.5T160-230q0-13 8.5-21.5T190-260h50v-304q0-84 49.5-150.5T420-798v-22q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v22q81 17 130.5 83.5T720-564v304h50q13 0 21.5 8.5T800-230q0 13-8.5 21.5T770-200H190Zm290-302Zm0 422q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM300-260h360v-304q0-75-52.5-127.5T480-744q-75 0-127.5 52.5T300-564v304ZM150-566q-13 0-21.5-9t-7.5-22q6-71 38-132t83-106q10-9 22.5-8.5T285-832q8 11 5.5 23.5T278-787q-40 36-65 84t-31 105q-2 14-10.5 23t-21.5 9Zm660 0q-13 0-21.5-9T778-598q-6-57-31-105t-65-84q-10-9-12.5-21.5T675-832q8-11 20.5-11.5T718-835q51 45 83 106t38 132q1 13-7.5 22t-21.5 9Z'/%3E%3C/svg%3E"); /* notifications_active */ --ic-alarm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M512-450v-160q0-13-8.5-21.5T482-640q-13 0-21.5 8.5T452-610v172q0 6 2 11t7 10l118 118q9 9 21 9t21-9q9-9 9-21t-9-21L512-450ZM339.5-110q-65.5-28-114-76.5t-77-114Q120-366 120-441q0-74 28.5-139.5t77-114.5q48.5-49 114-77T479-800q74 0 139.5 28T733-695q49 49 77 114.5T838-441q0 75-28 140.5t-77 114Q684-138 618.5-110T479-82q-74 0-139.5-28ZM479-439ZM71-688q-9-9-8.5-21t9.5-21l121-117q9-8 21.5-7.5T235-846q9 9 8.5 21t-9.5 21L113-687q-9 8-21.5 7.5T71-688Zm816 0q-8 8-20.5 8.5T845-687L724-804q-9-8-9.5-20.5T723-846q8-8 20.5-8.5T765-847l121 117q9 8 9.5 20.5T887-688ZM479-142q125 0 212-87t87-212q0-125-87-212t-212-87q-125 0-212 87t-87 212q0 125 87 212t212 87Z'/%3E%3C/svg%3E"); /* alarm */ --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M513-492v-171q0-13-8.5-21.5T483-693q-13 0-21.5 8.5T453-663v183q0 6 2 11t6 10l144 149q9 10 22.5 9.5T650-310q9-9 9-22t-9-22L513-492ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155t86-127.5Q252-817 325-848.5T480-880q82 0 155 31.5t127.5 86Q817-708 848.5-635T880-480q0 82-31.5 155t-86 127.5Q708-143 635-111.5T480-80Zm0-400Zm0 340q140 0 240-100t100-240q0-140-100-240T480-820q-140 0-240 100T140-480q0 140 100 240t240 100Z'/%3E%3C/svg%3E"); /* schedule */ --ic-repeat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m236-210 65 65q9 9 8.5 21t-8.75 21.12q-9 9.12-21.37 9.5Q267-93 258-102L141-219q-5-5-7-10.13-2-5.14-2-11 0-5.87 2-10.87 2-5 7-10l117-117q9.07-9 21.53-8.5Q292-386 301-377q8.25 9 8.63 21 .37 12-8.63 21l-65 65h464v-130q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v130q0 24.75-17.62 42.37Q724.75-210 700-210H236Zm488-480H260v130q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-130q0-24.75 17.63-42.38Q235.25-750 260-750h464l-65-65q-9-9-8.5-21t8.75-21.12q9-9.12 21.38-9.5Q693-867 702-858l117 117q5 5 7 10.13 2 5.14 2 11 0 5.87-2 10.87-2 5-7 10L702-582q-9.07 9-21.53 8.5Q668-574 659-583q-8.25-9-8.62-21-.38-12 8.62-21l65-65Z'/%3E%3C/svg%3E"); /* repeat */ --ic-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M579-380.76q41-40.77 41-99Q620-538 579.24-579q-40.77-41-99-41Q422-620 381-579.24q-41 40.77-41 99Q340-422 380.76-381q40.77 41 99 41Q538-340 579-380.76ZM338.5-338.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM70-450q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32Q57.25-510 70-510h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H70Zm720 0q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H790ZM458.5-768.63Q450-777.25 450-790v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm0 720Q450-57.25 450-70v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63ZM240-678l-57-56q-9-9-8.63-21.6.37-12.61 8.53-21.5 8.89-8.9 21.5-8.9 12.6 0 21.6 9l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.38 0-12.37 8.5-20.62 8.5-9 20.5-9t21 9l57 56q9 9 8.63 21.6-.37 12.61-8.53 21.5-8.89 8.9-21.5 8.9-12.6 0-21.6-9Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.6-8.63 12.61.37 21.5 8.53 8.9 8.89 8.9 21.5 0 12.6-9 21.6l-57 56q-8 8-20.36 8-12.37 0-21.64-8ZM182.9-182.9q-8.9-8.89-8.9-21.5 0-12.6 9-21.6l57-56q8.8-9 20.9-9 12.1 0 20.71 9 9.39 9 9.39 21t-9 21l-56 57q-9 9-21.6 8.63-12.61-.37-21.5-8.53ZM480-480Z'/%3E%3C/svg%3E"); /* light_mode */ --ic-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-120q-150 0-255-105T120-480q0-135 79.5-229T408-830q20-5 34-1t22 15q8 10 7.5 25t-8.5 35q-9 23-14 47t-5 49q0 90 63 153t153 63q25 0 48.5-4.5T754-461q22-8 38-7t26 9q10 8 13 23t-2 36q-27 121-121 200.5T480-120Zm0-60q109 0 190-67.5T771-406q-25 11-53.5 16.5T660-384q-115 0-195.5-80.5T384-660q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180-480q0 125 87.5 212.5T480-180Zm-4-297Z'/%3E%3C/svg%3E"); /* dark_mode */ --ic-euro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M600-120q-115 0-212.5-67.5T255-370H150q-13 0-21.5-8.5T120-400q0-13 8.5-21.5T150-430h93q-4-28-3.5-50t3.5-50h-93q-13 0-21.5-8.5T120-560q0-13 8.5-21.5T150-590h105q35-115 132.5-182.5T600-840q60 0 114.5 18.5T816-768q10 8 11 20t-8 21q-9 9-22 9.5t-24-7.5q-38-27-82-41t-91-14q-94 0-171.5 52.5T319-590h251q13 0 21.5 8.5T600-560q0 13-8.5 21.5T570-530H304q-5 27-5 50t5 50h266q13 0 21.5 8.5T600-400q0 13-8.5 21.5T570-370H319q32 85 109.5 137.5T600-180q45 0 89.5-13.5T773-235q11-8 24-7.5t22 9.5q9 9 8 21t-11 20q-43 32-99 52t-117 20Z'/%3E%3C/svg%3E"); /* euro */ --ic-free:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M444-752v-58q0-13 8.5-21.5T474-840q13 0 21.5 8.5T504-810v57q35 4 64 22.5t49 47.5q8 11 5.5 23.5T609-639q-11 8-23.5 5.5T565-647q-15-23-39-35.5T475-695q-20 0-40 5.5T398-672q-10 8-21.5 5.5T357-679q-8-10-6-21.5t12-19.5q18-13 38.5-21t42.5-11ZM785-78 614-248q-22 21-50.5 31T504-205v55q0 13-8.5 21.5T474-120q-13 0-21.5-8.5T444-150v-56q-49-7-84-36t-54-72q-5-12 .5-23.5T324-354q12-5 24 .5t17 17.5q17 37 45.5 55t69.5 18q26 0 50.5-6.5T570-292L78-784q-9-9-9-21.5t9-21.5q9-9 21.5-9t21.5 9l707 707q9 9 9 21t-9 21q-9 9-21.5 9T785-78Z'/%3E%3C/svg%3E"); /* money_off */ --ic-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M690-160q-12.75 0-21.37-8.63Q660-177.25 660-190v-220q0-12.75 8.63-21.38Q677.25-440 690-440h80q12.75 0 21.38 8.62Q800-422.75 800-410v220q0 12.75-8.62 21.37Q782.75-160 770-160h-80Zm-250 0q-12.75 0-21.37-8.63Q410-177.25 410-190v-580q0-12.75 8.63-21.38Q427.25-800 440-800h80q12.75 0 21.38 8.62Q550-782.75 550-770v580q0 12.75-8.62 21.37Q532.75-160 520-160h-80Zm-250 0q-12.75 0-21.37-8.63Q160-177.25 160-190v-380q0-12.75 8.63-21.38Q177.25-600 190-600h80q12.75 0 21.38 8.62Q300-582.75 300-570v380q0 12.75-8.62 21.37Q282.75-160 270-160h-80Z'/%3E%3C/svg%3E"); /* bar_chart */ --ic-trend-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M102-252q-9-9-9-21.5t9-21.5l228-227q16.93-17 41.97-17Q397-539 414-522l125 125 241-241h-97q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h167q12.75 0 21.38 8.62Q880-680.75 880-668v167q0 12-8.27 21t-20.5 9Q839-471 830-480t-9-21v-93L580-354q-16.93 17-41.97 17Q513-337 496-354L371-478 145-252q-9 9-21.5 9t-21.5-9Z'/%3E%3C/svg%3E"); /* trending_up */ --ic-trend-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M780-300 539-541 414-416q-16.93 17-41.97 17Q347-399 330-416L102-644q-9-9-9-21.5t9-21.5q9-9 21.5-9t21.5 9l226 227 125-125q16.93-17 41.97-17Q563-602 580-585l241 241v-94q0-12.33 9-20.66 9-8.34 21.23-8.34t20.5 8.34Q880-450.33 880-438v168q0 12.75-8.62 21.37Q862.75-240 850-240H683q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h97Z'/%3E%3C/svg%3E"); /* trending_down */ --ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m323-245 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm157-24L294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Zm0-206Z'/%3E%3C/svg%3E"); /* star */ --ic-star-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-269 294-157q-8 5-17 4.5t-16-5.5q-7-5-10.5-13t-1.5-18l49-212-164-143q-8-7-9.5-15.5t.5-16.5q2-8 9-13.5t17-6.5l217-19 84-200q4-9 12-13.5t16-4.5q8 0 16 4.5t12 13.5l84 200 217 19q10 1 17 6.5t9 13.5q2 8 .5 16.5T826-544L662-401l49 212q2 10-1.5 18T699-158q-7 5-16 5.5t-17-4.5L480-269Z'/%3E%3C/svg%3E"); /* star-fill */ --ic-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M458.19-144Q447-148 439-156l-53-49Q262-320 171-424.5T80-643q0-90.15 60.5-150.58Q201-854 290-854q51 0 101 24.5t89 80.5q44-56 91-80.5t99-24.5q89 0 149.5 60.42Q880-733.15 880-643q0 114-91 218.5T574-205l-53 49q-8.25 8.38-19.12 12.19Q491-140 480.19-140q-10.8 0-22-4ZM454-683q-27-49-71-80t-93-31q-66 0-108 42.5t-42 108.93q0 57.57 38.88 121.22 38.88 63.66 93 123.5Q326-338 384-286.5q58 51.5 96 86.5 38-34 96-86t112-112.5q54-60.5 93-124.19T820-643q0-66-42.5-108.5T670-794q-50 0-93.5 30.5T504-683q-5 8-11 11.5t-14 3.5q-8 0-14.5-3.5T454-683Zm26 186Z'/%3E%3C/svg%3E"); /* favorite */ --ic-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M458-144q-11-4-19-12l-53-49Q262-320 171-424.5T80-643q0-90 60.5-150.5T290-854q51 0 101 24.5t89 80.5q44-56 91-80.5t99-24.5q89 0 149.5 60.5T880-643q0 114-91 218.5T574-205l-53 49q-8 8-19 12t-22 4q-11 0-22-4Z'/%3E%3C/svg%3E"); /* favorite-fill */ --ic-medal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m480-483-76 57q-5 3-9.5 0t-2.5-8l29-93-78-61q-5-3-2.5-8t7.5-5h94l31-96q2-5 7-5t7 5l30 96h95q5 0 7.5 5t-2.5 8l-78 61 28 93q2 5-2 8t-9 0l-76-57Zm0 364L284-53q-14 5-27-4.5T244-82v-262q-45-47-64.5-103T160-560q0-136 92-228t228-92q136 0 228 92t92 228q0 57-19.5 113T716-344v262q0 15-13 24.5T676-53l-196-66Zm184.5-256.5Q740-451 740-560t-75.5-184.5Q589-820 480-820t-184.5 75.5Q220-669 220-560t75.5 184.5Q371-300 480-300t184.5-75.5ZM304-124l176-55 176 55v-171q-40 29-86 42t-90 13q-44 0-90-13t-86-42v171Zm176-86Z'/%3E%3C/svg%3E"); /* workspace_premium */ --ic-medal-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m480-483-76 57q-5 3-9.5 0t-2.5-8l29-93-78-61q-5-3-2.5-8t7.5-5h94l31-96q2-5 7-5t7 5l30 96h95q5 0 7.5 5t-2.5 8l-78 61 28 93q2 5-2 8t-9 0l-76-57Zm0 364L284-53q-14 5-27-4.5T244-82v-262q-45-47-64.5-103T160-560q0-136 92-228t228-92q136 0 228 92t92 228q0 57-19.5 113T716-344v262q0 15-13 24.5T676-53l-196-66Zm184.5-256.5Q740-451 740-560t-75.5-184.5Q589-820 480-820t-184.5 75.5Q220-669 220-560t75.5 184.5Q371-300 480-300t184.5-75.5Z'/%3E%3C/svg%3E"); /* workspace_premium-fill */ --ic-crown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M233-160q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h494q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H233Zm20-144q-21.66 0-38.46-14.46Q197.73-332.93 194-355l-45-283q-5 2-9.5 2.5t-9.5.5q-20.83 0-35.42-14.62Q80-664.24 80-685.12 80-706 94.62-721q14.62-15 35.5-15Q151-736 166-721.13q15 14.88 15 36.13 0 8-2.5 16t-7.5 14l148 66 141-194q-14-6-22.5-18.5T429-830q0-20.83 14.82-35.42 14.83-14.58 36-14.58Q501-880 516-865.42q15 14.59 15 35.42 0 16-8.5 28.5T500-783l141 194 148-66q-5-6-7.5-14t-2.5-16q0-21.25 15-36.13Q809-736 829.5-736t35.5 14.82q15 14.83 15 36 0 21.18-14.87 35.68Q850.25-635 829-635q-5 0-9-1t-9-3l-45 284q-3.6 22.07-19.8 36.54Q730-304 707-304H253Zm0-60h454l32-203-73 33q-20 9-40.5 3T592-554L480-709 368-554q-13 17-33.5 23t-40.5-3l-73-33 32 203Zm227 0Z'/%3E%3C/svg%3E"); /* crown */ --ic-thumb-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M855-632q24 0 42 18t18 42v81.84q0 7.16 1.5 14.66T915-461L789-171q-8.88 21.25-29.59 36.12Q738.69-120 716-120H272v-512l225-238q13.6-14 32.19-16.5Q547.77-889 565-879q17 10 25.5 27.5t4.2 36.5L556-632h299Zm-523 25v427h397l126-299v-93H482l53-249-203 214ZM139-120q-24.75 0-42.37-17.63Q79-155.25 79-180v-392q0-24.75 17.63-42.38Q114.25-632 139-632h133v60H139v392h133v60H139Zm193-60v-427 427Z'/%3E%3C/svg%3E"); /* thumb_up */ --ic-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880q13 0 21.5 8.5T510-850v296q22 9 36 29t14 45q0 33-23.5 56.5T480-400q-33 0-56.5-23.5T400-480q0-25 14-45t36-29v-104q-65 11-107.5 60.5T300-480q0 75 52.5 127.5T480-300q75 0 127.5-52.5T660-480q0-32-10.5-60T621-591q-8-10-8-23t9-22q9-9 21.5-8.5T664-634q26 32 41 70.5t15 83.5q0 100-70 170t-170 70q-100 0-170-70t-70-170q0-93 60-160.5T450-719v-100q-131 11-220.5 108T140-480q0 142 99 241t241 99q142 0 241-99t99-241q0-65-22-122t-62-102q-9-10-9.5-23t8.5-22q9-9 22-8.5t21 10.5q48 54 75 121.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80q-83 0-156-31.5Z'/%3E%3C/svg%3E"); /* track_changes */ --ic-music:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M286.5-163.5Q243-207 243-270t43.5-106.5Q330-420 393-420q28 0 50.5 8t39.5 22v-420q0-13 8.5-21.5T513-840h174q13 0 21.5 8.5T717-810v75q0 13-8.5 21.5T687-705H543v435q0 63-43.5 106.5T393-120q-63 0-106.5-43.5Z'/%3E%3C/svg%3E"); /* music_note */ --ic-theatre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M773-676q13.6 0 22.8-9.2 9.2-9.2 9.2-22.8 0-13.6-9.2-22.8-9.2-9.2-22.8-9.2-13.6 0-22.8 9-9.2 9-9.2 23t9.2 23q9.2 9 22.8 9Zm-172 0q13.6 0 22.8-9.2 9.2-9.2 9.2-22.8 0-13.6-9-22.8-9-9.2-23-9.2t-23 9q-9 9-9 23t9.2 23q9.2 9 22.8 9Zm29.5 85q-26.5 9-42.5 32-6 10 1 19.5t19.86 9.5h154.28q12.86 0 19.86-9.5t1-19.5q-16-23-42.5-32t-55.5-9q-29 0-55.5 9Zm-522 441.75Q40-217.5 40-315v-207q0-24.75 17.63-42.38Q75.25-582 100-582h348q24.75 0 42.38 17.62Q508-546.75 508-522v207q0 97.5-68.5 165.75T274-81q-97 0-165.5-68.25ZM397-192.11q51-51.12 51-122.89v-207H100v207q0 71.77 51.16 122.89 51.16 51.11 123 51.11T397-192.11ZM920-820v216q0 95.62-69.5 160.31T687-379q-23 0-47-4.5T594-396q-12-5-17-16.09-5-11.08 0-22.91 5-11 16.09-16.5 11.08-5.5 22.91-.5 17 6 35.5 9.5T689-439q69 0 120-47.5T860-604v-216H509v159q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-159q0-24.75 17.63-42.38Q484.25-880 509-880h351q24.75 0 42.38 17.62Q920-844.75 920-820ZM189-386q13.6 0 22.8-9.2 9.2-9.2 9.2-22.8 0-13.6-9.2-22.8-9.2-9.2-22.8-9.2-13.6 0-22.8 9.2-9.2 9.2-9.2 22.8 0 13.6 9.2 22.8 9.2 9.2 22.8 9.2Zm196-9.2q9-9.2 9-22.8 0-13.6-9.2-22.8-9.2-9.2-22.8-9.2-13.6 0-22.8 9.2-9.2 9.2-9.2 22.8 0 13.6 9 22.8 9 9.2 23 9.2t23-9.2ZM332.5-240q26.5-9 42.71-31.63Q381-282 373.96-291.5 366.91-301 354-301H200q-12.91 0-19.96 9.5-7.04 9.5-1.25 19.87Q195-249 221.5-240t55.5 9q29 0 55.5-9ZM274-332Zm406-298Z'/%3E%3C/svg%3E"); /* theater_comedy */ --ic-football:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480.5q0-82.5 31.5-155t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127t31.5 155q0 82.5-31.5 155.5t-86 127.5q-54.5 54.5-127 86T480-80Zm205-493 69-24 18-64q-34-53-84-90.5T575-809l-65 43v70l175 123Zm-409 0 174-123v-70l-64-43q-63 20-113 57.5T189-661l22 64 65 24Zm-54 320 60-7 39-65-62-191-71-24-48 39q0 72 16 131.5T222-253Zm312.5 108q27.5-5 57.5-13l33-72-32-55H368l-32 55 33 72q26 8 55 13t56 5q27 0 54.5-5ZM374-345h208l61-183-163-117-166 117 60 183Zm365 92q49-57 65-116.5T820-501l-48-33-70 18-62 191 38 65 61 7Z'/%3E%3C/svg%3E"); /* sports_soccer */ --ic-gamepad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M147-200q-38 0-59.5-25.5T72-296l48-335q8-53 49.5-91t94.5-38h433q53 0 94.5 38t49.5 91l47 335q6 45-15.5 70.5T813-200q-23 0-39-7.5T747-226L643-330H317L213-226q-11 11-27 18.5t-39 7.5Zm18-64 126-126h378l126 126q5 5 18 9 9 0 13.5-9t2.5-18l-48-339q-5-35-29.5-57T697-700H263q-30 0-54.5 22T179-621l-48 339q-2 9 2.5 18t13.5 9q7 0 18-9Zm563-188q12-12 12-28t-12-28q-12-12-28-12t-28 12q-12 12-12 28t12 28q12 12 28 12t28-12Zm-85-130q12-12 12-28t-12-28q-12-12-28-12t-28 12q-12 12-12 28t12 28q12 12 28 12t28-12ZM480-478Zm-180-42v50q0 11 7 18t18 7q11 0 18-7t7-18v-50h50q11 0 18-7t7-18q0-11-7-18t-18-7h-50v-50q0-11-7-18t-18-7q-11 0-18 7t-7 18v50h-50q-11 0-18 7t-7 18q0 11 7 18t18 7h50Z'/%3E%3C/svg%3E"); /* sports_esports */ --ic-tv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m429-379 181-116q14-8.79 14-24.89Q624-536 610-545L429-661q-15-10-30.5-1T383-635v230q0 18 15.5 27t30.5-1ZM140-200q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H630v50q0 12.75-8.62 21.37Q612.75-120 600-120H360q-12.75 0-21.37-8.63Q330-137.25 330-150v-50H140Zm0-60h680v-520H140v520Zm0 0v-520 520Z'/%3E%3C/svg%3E"); /* live_tv */ --ic-party:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m181-181 314-112-203-204-111 316Zm744-505q-7 7-17 7t-17-7l-2-2q-19-19-44-19.5T800-688L574-462q-7 7-17 7t-17-7q-7-7-7-17t7-17l223-223q32-32 81-32.5t81 31.5q7 7 7 17t-7 17ZM383-811q7-7 17-7t17 7l9 9q35 35 34.5 87.5T425-627l-10 10q-7 7-17 7t-17-7q-7-7-7-17t7-17l13-13q23-23 21.5-52.5T394-766l-11-11q-7-7-7-17t7-17Zm169-73q7-7 17-7t17 7l46 46q31 32 32 80.5T633-677L496-540q-7 7-17 7t-17-7q-7-7-7-17t7-17l135-135q19-19 18.5-48.5T596-806l-44-44q-7-7-7-17t7-17Zm300 505q-7 7-17 7t-17-7l-35-35q-23-23-48-23t-48 23l-33 33q-7 7-17 7t-17-7q-7-7-7-17t7-17l30-30q35-35 84-36t84 34l34 34q7 7 7 17t-7 17ZM181-181Zm-80 41 149-416q4-10 11.5-15t16.5-5q5 0 10.5 2t10.5 7l270 266q5 5 7 10.5t2 11.5q0 9-5 16.5T558-251L140-101q-9 3-17.5 1t-14.5-8q-6-6-8-14.5t1-17.5Z'/%3E%3C/svg%3E"); /* celebration */ --ic-festival:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M139-80q-20 0-32-16t-7-36q17-66 25-132t10-133q-45-14-70-52.5T40-536v-26q0-16 8.5-28.5T72-608q106-42 198.5-104.5T448-850q7-6 15-9t17-3q9 0 17 3t15 9q85 75 177.5 137.5T888-608q15 5 23.5 17.5T920-562v26q0 47-24.5 86T826-397q2 67 9.5 133.5T860-132q5 20-6.5 36T822-80H139Zm51-516h580q-80-40-151.5-91.5T480-798q-66 60-138.5 110.5T190-596Zm393 145q32 0 52-25.5t20-59.5H510q0 34 20.5 59.5T583-451Zm-205 0q32 0 52-25.5t20-59.5H305q0 34 20.5 59.5T378-451Zm-205 0q32 0 52-25.5t20-59.5H100q0 34 20.5 59.5T173-451Zm-8 311h133q11-65 16-129.5t9-130.5q-14-6-26-16.5T278-441q-17 19-38 31.5T195-392q-3 64-9.5 126.5T165-140Zm195 0h241q-9-63-14-126t-8-127q-31-2-58.5-15.5T477-449q-14 26-40 40t-55 16q-4 64-8.5 127T360-140Zm302 0h134q-14-63-21-125.5T766-392q-23-5-43-17.5T688-441q-10 14-22 24.5T638-400q4 66 10 130.5T662-140Zm126-311q32 0 52-25.5t20-59.5H715q0 34 20.5 59.5T788-451Z'/%3E%3C/svg%3E"); /* festival */ --ic-cheers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M261-220v-204L71-714q-10-15-1.5-30.5T96-760h390q18 0 26.5 15.5T511-714L321-424v204h54q13 0 21.5 8.5T405-190q0 13-8.5 21.5T375-160H207q-13 0-21.5-8.5T177-190q0-13 8.5-21.5T207-220h54Zm-61-394h182l55-86H145l55 86Zm352.5 421.5Q520-225 520-275t32.5-82.5Q585-390 635-390q15 0 28.5 3t26.5 8v-351q0-13 8.5-21.5T720-760h111q20 0 34.5 14.5T880-711q0 20-14.5 35T831-661h-81v386q0 50-32.5 82.5T635-160q-50 0-82.5-32.5Z'/%3E%3C/svg%3E"); /* nightlife */ --ic-whiskey:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M198-140v-141q-35-10-56.5-38.5T120-386v-304q0-13 8.5-21.5T150-720h156q13 0 21.5 8.5T336-690v304q0 35-21.5 65T258-281v141h48q13 0 21.5 8.5T336-110q0 13-8.5 21.5T306-80H150q-13 0-21.5-8.5T120-110q0-13 8.5-21.5T150-140h48Zm-18-359h96v-161h-96v161Zm48 161q19 0 33.5-14.5T276-386v-53h-96v53q0 19 14.5 33.5T228-338ZM520-80q-24 0-42-18t-18-42v-408q0-20 11-32t31-21l38-17q24-11 35-27t11-39v-161q0-16 9.5-25.5T621-880h94q16 0 25.5 9.5T750-845v161q0 23 13.5 39t37.5 27l38 17q19 8 30 20.5t11 32.5v408q0 24-18 42t-42 18H520Zm126-696h44v-44h-44v44ZM520-465h300v-83l-42-16q-40-15-64-49t-24-75v-28h-44v28q0 41-22.5 72T563-568l-43 20v83Zm0 325h300v-103H520v103Zm0-163h300v-102H520v102ZM228-439Zm292 136v-102 102Z'/%3E%3C/svg%3E"); /* liquor */ --ic-food:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M285-600v-250q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v250h65v-250q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v249.73q0 58.27-36.5 99.77Q397-459 345-448v338q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q285-97.25 285-110v-338q-52-11-88.5-52.5T160-600.27V-850q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v250h65Zm415 200h-85q-12.75 0-21.37-8.63Q585-417.25 585-430v-275q0-69 42.5-122t98.5-53q14 0 24 10.13T760-846v736q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q700-97.25 700-110v-290Z'/%3E%3C/svg%3E"); /* restaurant */ --ic-cookie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155T197-763q54-55 126-87t153-32q32 0 51.5 15t24.5 47q8 58 50 98.5t99 48.5q21 3 33 16t17 37q5 31 26 55.5t50 38.5q31 15 43 36t8 53q-7 74-41 139t-87.5 113.5Q696-136 627.1-108 558.21-80 480-80Zm0-60q142 0 236-93.5T821-464q-54-20-87.5-59.5T692-614q-81-11-136.5-70T492-821q-74-3-138.5 24t-112 74Q194-676 167-612.5T140-480q0 142 99 241t241 99Zm1-345Zm-60.88-73Q446-558 464-576.12q18-18.12 18-44T463.88-664q-18.12-18-44-18T376-663.88q-18 18.12-18 44T376.12-576q18.12 18 44 18Zm-80 200Q366-358 384-376.12q18-18.12 18-44T383.88-464q-18.12-18-44-18T296-463.88q-18 18.12-18 44T296.12-376q18.12 18 44 18ZM600-320q17 0 28.5-11.5T640-360q0-17-11.5-28.5T600-400q-17 0-28.5 11.5T560-360q0 17 11.5 28.5T600-320Z'/%3E%3C/svg%3E"); /* cookie */ --ic-garden:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M450-110v-490H128q-11 0-14.5-10.5T119-627l344-241q8.17-5 17.09-5 8.91 0 16.91 5l344 241q9 6 5.5 16.5T832-600H510v490q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q450-97.25 450-110Zm30-550h210-420 210ZM120-110v-181.07L93-437q-2-12 5.5-22t19.86-12q11.64-2 21.14 4.5T151-448l27 138h132q12.75 0 21.38 8.62Q340-292.75 340-280v170q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q280-97.25 280-110v-140H180v140q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q120-97.25 120-110Zm500 0v-170q0-12.75 8.63-21.38Q637.25-310 650-310h132l27-138q2-12 12-18.5t22-4.5q12 2 19 12t5 22l-27 145.93V-110q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q780-97.25 780-110v-140H680v140q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q620-97.25 620-110ZM270-660h420L480-807 270-660Z'/%3E%3C/svg%3E"); /* deck */ --ic-fire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M253-173q-93-93-93-227 0-116 71.5-225T428-811q17-11 34.5-.5T480-780v72q0 34 23.5 57t57.5 23q18 0 33.5-7.5T622-658q8-9 18-12.5t19 2.5q66 45 103.5 116T800-400q0 134-93 227T480-80q-134 0-227-93Zm-33-227q0 63 28.5 118.5T328-189q-4-12-6-24.5t-2-24.5q0-32 12-60t35-51l113-111 113 111q23 23 35 51t12 60q0 12-2 24.5t-6 24.5q51-37 79.5-92.5T740-400q0-54-23-105.5T651-600q-21 15-44 23.5t-46 8.5q-61 0-101-41.5T420-714v-20q-92 66-146 156.5T220-400Zm260 24-71 70q-14 14-21.5 31t-7.5 37q0 41 29 69.5t71 28.5q42 0 71-28.5t29-69.5q0-20-7.5-37T551-306l-71-70Z'/%3E%3C/svg%3E"); /* local_fire_department */ --ic-brain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m446-418 2 30q.74 6.22 4.78 10.11 4.05 3.89 9.94 3.89h32.39q5.89 0 10.02-3.89 4.12-3.89 4.87-10.11l2-30q12-2 22.47-8.46Q544.94-432.92 553-441l30 10q5 2 10 0t7.8-6.85l15.4-26.3q2.8-4.85 2.3-9.85t-5.19-9.17L593-499q5-14 5-29t-5-29l20.31-15.83Q618-577 618.5-582t-2.3-9.85l-15.4-26.3Q598-623 593-625t-10 0l-30 10q-8.33-7.69-19.17-13.85Q523-635 512-638l-2-30q-.74-6.22-4.78-10.11-4.05-3.89-9.94-3.89h-32.39q-5.89 0-10.01 3.89-4.13 3.89-4.88 10.11l-2 30q-11 3-21.83 9.15Q413.33-622.69 405-615l-30-10q-5-2-10 0t-7.8 6.85l-15.4 26.3Q339-587 339.5-582t5.19 9.17L365-557q-5 14-5 29t5 29l-20.31 15.83Q340-479 339.5-474t2.3 9.85l15.4 26.3Q360-433 365-431t10 0l30-10q8.06 8.08 18.53 14.54Q434-420 446-418Zm-16.5-60.38q-20.5-20.38-20.5-49.5t20.38-49.62q20.38-20.5 49.5-20.5t49.62 20.38q20.5 20.38 20.5 49.5t-20.38 49.62q-20.38 20.5-49.5 20.5t-49.62-20.38ZM240-252q-57-52-88.5-121.5T120-520q0-150 105-255t255-105q125 0 221.5 73.5T827-615l55 218q4 14-5 25.5T853-360h-93v140q0 24.75-17.62 42.37Q724.75-160 700-160H600v50q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q540-97.25 540-110v-80q0-12.75 8.63-21.38Q557.25-220 570-220h130v-170q0-12.75 8.63-21.38Q717.25-420 730-420h84l-45-180q-24-97-105-158.5T480-820q-125 0-212.5 86.5T180-522.46q0 64.42 26.32 122.39Q232.65-342.09 281-297l19 18v169q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q240-97.25 240-110v-142Zm257-198Z'/%3E%3C/svg%3E"); /* psychology */ --ic-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M321-295q9-9 9-21t-9-21q-9-9-21-9t-21 9q-9 9-9 21t9 21q9 9 21 9t21-9Zm0-164q9-9 9-21t-9-21q-9-9-21-9t-21 9q-9 9-9 21t9 21q9 9 21 9t21-9Zm0-164q9-9 9-21t-9-21q-9-9-21-9t-21 9q-9 9-9 21t9 21q9 9 21 9t21-9Zm141 337h184q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H462q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5Zm0-164h184q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H462q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5Zm0-164h184q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H462q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z'/%3E%3C/svg%3E"); /* list_alt */ --ic-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M349-250h262q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H349q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5Zm0-170h262q12.75 0 21.38-8.68 8.62-8.67 8.62-21.5 0-12.82-8.62-21.32-8.63-8.5-21.38-8.5H349q-12.75 0-21.37 8.68-8.63 8.67-8.63 21.5 0 12.82 8.63 21.32 8.62 8.5 21.37 8.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z'/%3E%3C/svg%3E"); /* description */ --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M248-300q53.57 0 104.28 12.5Q403-275 452-250v-427q-45-30-97.62-46.5Q301.76-740 248-740q-38 0-74.5 9.5T100-707v434q31-14 70.5-20.5T248-300Zm264 50q50-25 98-37.5T712-300q38 0 78.5 6t69.5 16v-429q-34-17-71.82-25-37.82-8-76.18-8-54 0-104.5 16.5T512-677v427Zm-44.5 77.5Q461-174 456-178q-47-29-99.85-45-52.84-16-108.15-16-36.54 0-71.77 9T106-208q-23.1 11-44.55-3Q40-225 40-251v-463q0-15 7-27.5T68-761q42-20 87.39-29.5 45.4-9.5 92.61-9.5 63 0 122.5 17T482-731q51-35 109.5-52T712-800q46.87 0 91.93 9.5Q849-781 891-761q14 7 21.5 19.5T920-714v463q0 27.89-22.5 42.45Q875-194 853-208q-34-14-69.23-22.5Q748.54-239 712-239q-54.27 0-106.14 16Q554-207 508-178q-5 4-11.5 5.5T482-171q-8 0-14.5-1.5ZM276-489Zm284-119q0-5.52 4.02-11.34 4.03-5.82 8.98-7.66 30-11 61.34-17 31.33-6 65.91-6 21.61 0 42.68 2.5T784-640q6 2 11 7.4 5 5.39 5 12.13 0 11.47-7.5 17.47-7.5 6-18.5 3-16.8-5-35.4-7.5Q720-610 700-610q-29 0-56 5.5T591-588q-14 5-22.5-.5T560-608Zm0 220q0-5.81 4.02-11.94 4.03-6.12 8.98-8.06 30-11 61.34-16.5 31.33-5.5 65.91-5.5 21.61 0 42.68 2.5T784-420q6 2 11 7.4 5 5.39 5 12.13 0 11.47-7.5 17.47-7.5 6-18.5 3-16.8-5-35.4-7.5Q720-390 700-390q-29 0-56 5t-53 16q-14 5-22.5 0t-8.5-19Zm0-110q0-5.52 4.02-11.34 4.03-5.82 8.98-7.66 30-11 61.34-17 31.33-6 65.91-6 21.61 0 42.68 2.5T784-530q6 2 11 7.4 5 5.39 5 12.13 0 11.47-7.5 17.47-7.5 6-18.5 3-16.8-5-35.4-7.5Q720-500 700-500q-29 0-56 5.5T591-478q-14 5-22.5-.5T560-498Z'/%3E%3C/svg%3E"); /* menu_book */ --ic-gavel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M190-180h420q13 0 21.5 8.5T640-150q0 13-8.5 21.5T610-120H190q-13 0-21.5-8.5T160-150q0-13 8.5-21.5T190-180Zm150-194L202-512q-17-17-17.5-41.5T201-596l29-30 224 222-30 30q-17 17-42 17t-42-17Zm296-212L414-810l30-29q18-17 42.5-16.5T528-838l138 138q17 17 17 42t-17 42l-30 30Zm181 405L302-696l42-42 515 515q9 9 9 21t-9 21q-9 9-21 9t-21-9Z'/%3E%3C/svg%3E"); /* gavel */ --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm680-525L496-473q-4 2-7.5 3.5T480-468q-5 0-8.5-1.5T464-473L140-685v465h680v-465ZM480-522l336-218H145l335 218ZM140-685v7-39.32.73V-740v23-.91V-678v-7 465-465Z'/%3E%3C/svg%3E"); /* mail */ --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M795-120q-116 0-236.5-56T335-335Q232-438 176-558.5T120-795q0-19.29 12.86-32.14Q145.71-840 165-840h140q14 0 24 10t14 25l26.93 125.64Q372-665 369.5-653.5t-10.73 19.73L259-533q26 44 55 82t64 72q37 38 78 69.5t86 55.5l95-98q10-11 23.15-15 13.15-4 25.85-2l119 26q15 4 25 16.04 10 12.05 10 26.96v135q0 19.29-12.86 32.14Q814.29-120 795-120ZM229-588l81-82-23-110H180q2 42 13.5 88.5T229-588Zm369 363q41 19 89 31t93 14v-107l-103-21-79 83ZM229-588Zm369 363Z'/%3E%3C/svg%3E"); /* call */ --ic-bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M422.5-103.5Q399-127 399-161h162q0 34-23.5 57.5T480-80q-34 0-57.5-23.5ZM348-223q-13 0-21.5-8.5T318-253q0-13 8.5-21.5T348-283h264q13 0 21.5 8.5T642-253q0 13-8.5 21.5T612-223H348Zm-25-121q-66-43-104.5-107.5T180-597q0-122 89-211t211-89q122 0 211 89t89 211q0 81-38 145.5T637-344H323Zm22-60h271q48-32 76-83t28-110q0-99-70.5-169.5T480-837q-99 0-169.5 70.5T240-597q0 59 28 110t77 83Zm135 0Z'/%3E%3C/svg%3E"); /* lightbulb */ --ic-houses:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='M920-780v600q0 24.75-17.62 42.37Q884.75-120 860-120H671q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h189v-600H465v70q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-70q0-24.62 17.69-42.31T465-840h395q24.75 0 42.38 17.62Q920-804.75 920-780ZM40-479q0-14 6.5-27.5T65-528l211-151q8.34-5.87 17.07-8.43 8.72-2.57 17.83-2.57 9.1 0 17.89 2.57 8.8 2.56 17.21 8.43l210 151q12 8 18.5 21.5T581-479v299q0 24.75-17.62 42.37Q545.75-120 521-120h-97q-24.75 0-42.37-17.63Q364-155.25 364-180v-141H258v141q0 24.75-17.62 42.37Q222.75-120 198-120h-98q-24.75 0-42.37-17.63Q40-155.25 40-180v-299Zm60 .42V-180h98v-141q0-24.75 17.63-42.38Q233.25-381 258-381h106q24.75 0 42.38 17.62Q424-345.75 424-321v141h97v-298.58L311-630 100-478.58ZM615-563ZM424-180v-201H198v201-201h226v201Zm288-443h30q6 0 10.5-4.5T757-638v-30q0-6-4.5-10.5T742-683h-30q-6 0-10.5 4.5T697-668v30q0 6 4.5 10.5T712-623Zm0 171h30q6 0 10.5-4.5T757-467v-30q0-6-4.5-10.5T742-512h-30q-6 0-10.5 4.5T697-497v30q0 6 4.5 10.5T712-452Zm0 170h30q6 0 10.5-4.5T757-297v-30q0-6-4.5-10.5T742-342h-30q-6 0-10.5 4.5T697-327v30q0 6 4.5 10.5T712-282Z'/%3E%3C/svg%3E"); /* home_work */ --ic-thanks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m562-110 248-78q0-20-15.5-34T758-235H549q-16 1-31.5-2t-30.5-8l-66-20q-12-4-18-16t-2-24q4-12 15.28-18t23.72-1l64 21q11 4 22.5 6t22.5 2h56q2 0 0 0 0-21-14-36.5T557-355l-218-83h-84v238l307 90Zm-13 57-294-84q-2 27-22.5 42T195-80h-95q-24.75 0-42.37-17.63Q40-115.25 40-140v-298q0-24.75 17.63-42.38Q75.25-498 100-498h238q5.33 0 10.67 1 5.33 1 10.33 3l218 82q42 16 66.5 46t24.5 71h90q50.83 0 86.42 37Q880-221 880-170q0 11-5.5 20T859-138L583-53q-8.17 2-17.09 2Q557-51 549-53Zm-449-87h94v-298h-94v298Zm524-344.5q-11-4.5-20-12.5L482-616q-29.32-27.74-49.66-61.49Q412-711.24 412-751q0-53 35-91t87-38q34 0 62 17.5t50 43.5q22-26 50-43.5t62-17.5q52 0 87 38t35 91q0 39.66-20.5 73.33T810-616L688-497q-9 8-19.81 12.5-10.82 4.5-22 4.5-11.19 0-22.19-4.5Zm22-54.5 120-119q20.12-19.85 37.06-42.32T820-751q0-28-17.5-48.5T758-820q-20 0-37 11t-30 27l-21.66 27.14Q660.38-744 646.19-744q-14.19 0-23.26-10.86L601-782q-13-16-30-27t-37-11q-27 0-44.5 20.5T472-751q0 28.21 16.94 50.68T526-658l120 119Zm0-188Z'/%3E%3C/svg%3E"); /* volunteer_activism */ } .ic-home{--i:var(--ic-home)} .ic-map{--i:var(--ic-map)} .ic-pint{--i:var(--ic-pint)} .ic-pint-fill{--i:var(--ic-pint-fill)} .ic-tag{--i:var(--ic-tag)} .ic-feed{--i:var(--ic-feed)} .ic-trophy{--i:var(--ic-trophy)} .ic-trophy-fill{--i:var(--ic-trophy-fill)} .ic-boot{--i:var(--ic-boot)} .ic-passport{--i:var(--ic-passport)} .ic-calendar{--i:var(--ic-calendar)} .ic-dice{--i:var(--ic-dice)} .ic-compass{--i:var(--ic-compass)} .ic-settings{--i:var(--ic-settings)} .ic-pin{--i:var(--ic-pin)} .ic-pin-fill{--i:var(--ic-pin-fill)} .ic-pin-plus{--i:var(--ic-pin-plus)} .ic-locate{--i:var(--ic-locate)} .ic-globe{--i:var(--ic-globe)} .ic-walk{--i:var(--ic-walk)} .ic-route{--i:var(--ic-route)} .ic-bus{--i:var(--ic-bus)} .ic-chat{--i:var(--ic-chat)} .ic-person{--i:var(--ic-person)} .ic-people{--i:var(--ic-people)} .ic-handshake{--i:var(--ic-handshake)} .ic-wave{--i:var(--ic-wave)} .ic-megaphone{--i:var(--ic-megaphone)} .ic-send{--i:var(--ic-send)} .ic-sms{--i:var(--ic-sms)} .ic-id{--i:var(--ic-id)} .ic-camera{--i:var(--ic-camera)} .ic-search{--i:var(--ic-search)} .ic-search-off{--i:var(--ic-search-off)} .ic-close{--i:var(--ic-close)} .ic-cancel{--i:var(--ic-cancel)} .ic-check{--i:var(--ic-check)} .ic-chevron{--i:var(--ic-chevron)} .ic-chevron-down{--i:var(--ic-chevron-down)} .ic-plus{--i:var(--ic-plus)} .ic-minus{--i:var(--ic-minus)} .ic-edit{--i:var(--ic-edit)} .ic-trash{--i:var(--ic-trash)} .ic-copy{--i:var(--ic-copy)} .ic-link{--i:var(--ic-link)} .ic-share{--i:var(--ic-share)} .ic-ios-share{--i:var(--ic-ios-share)} .ic-refresh{--i:var(--ic-refresh)} .ic-more{--i:var(--ic-more)} .ic-drag{--i:var(--ic-drag)} .ic-flag{--i:var(--ic-flag)} .ic-ban{--i:var(--ic-ban)} .ic-arrow-right{--i:var(--ic-arrow-right)} .ic-circle{--i:var(--ic-circle)} .ic-circle-fill{--i:var(--ic-circle-fill)} .ic-check-circle{--i:var(--ic-check-circle)} .ic-check-circle-fill{--i:var(--ic-check-circle-fill)} .ic-warn{--i:var(--ic-warn)} .ic-lock{--i:var(--ic-lock)} .ic-shield{--i:var(--ic-shield)} .ic-key{--i:var(--ic-key)} .ic-login{--i:var(--ic-login)} .ic-logout{--i:var(--ic-logout)} .ic-signal{--i:var(--ic-signal)} .ic-bell{--i:var(--ic-bell)} .ic-bell-ring{--i:var(--ic-bell-ring)} .ic-alarm{--i:var(--ic-alarm)} .ic-clock{--i:var(--ic-clock)} .ic-repeat{--i:var(--ic-repeat)} .ic-sun{--i:var(--ic-sun)} .ic-moon{--i:var(--ic-moon)} .ic-euro{--i:var(--ic-euro)} .ic-free{--i:var(--ic-free)} .ic-chart{--i:var(--ic-chart)} .ic-trend-up{--i:var(--ic-trend-up)} .ic-trend-down{--i:var(--ic-trend-down)} .ic-star{--i:var(--ic-star)} .ic-star-fill{--i:var(--ic-star-fill)} .ic-heart{--i:var(--ic-heart)} .ic-heart-fill{--i:var(--ic-heart-fill)} .ic-medal{--i:var(--ic-medal)} .ic-medal-fill{--i:var(--ic-medal-fill)} .ic-crown{--i:var(--ic-crown)} .ic-thumb-up{--i:var(--ic-thumb-up)} .ic-target{--i:var(--ic-target)} .ic-music{--i:var(--ic-music)} .ic-theatre{--i:var(--ic-theatre)} .ic-football{--i:var(--ic-football)} .ic-gamepad{--i:var(--ic-gamepad)} .ic-tv{--i:var(--ic-tv)} .ic-party{--i:var(--ic-party)} .ic-festival{--i:var(--ic-festival)} .ic-cheers{--i:var(--ic-cheers)} .ic-whiskey{--i:var(--ic-whiskey)} .ic-food{--i:var(--ic-food)} .ic-cookie{--i:var(--ic-cookie)} .ic-garden{--i:var(--ic-garden)} .ic-fire{--i:var(--ic-fire)} .ic-brain{--i:var(--ic-brain)} .ic-list{--i:var(--ic-list)} .ic-doc{--i:var(--ic-doc)} .ic-book{--i:var(--ic-book)} .ic-gavel{--i:var(--ic-gavel)} .ic-mail{--i:var(--ic-mail)} .ic-phone{--i:var(--ic-phone)} .ic-bulb{--i:var(--ic-bulb)} .ic-houses{--i:var(--ic-houses)} .ic-thanks{--i:var(--ic-thanks)} /* END GENERATED */ /* ══════════════════════════════════════════════════════════════════════════ WHAT IT COST IN THE SPRING The chip ppMoveChip() draws. It is here and not in index.css because two pages put it on screen, the map, on a pub sheet, and the feed, on the list of pubs you follow, and feed.html does not load index.css. A style only one of two callers can see is worse than none: the markup renders either way, so the failure is a chip that looks like plain text on one page and nobody notices until somebody screenshots it. Up is the dear end of the price ramp and down is the cheap end: the same two colours the pins already use, meaning the same two things. A third colour for "changed" would be one more thing to learn for no more information. ══════════════════════════════════════════════════════════════════════════ */ .price-move{ display:inline-flex;align-items:center;gap:4px; font-size:12.5px;font-weight:700;line-height:1; padding:4px 8px;border-radius:var(--r-full); font-variant-numeric:tabular-nums; white-space:nowrap;cursor:help; } .price-move .ic{font-size:13px} .price-move.is-up{background:var(--price-dear-soft);color:var(--price-dear)} .price-move.is-down{background:var(--price-cheap-soft);color:var(--price-cheap)} /* ═══════════════════════════════════════════════════════════════════════════ BOTTOM NAV ═══════════════════════════════════════════════════════════════════════════ One navigation, on every page that has one, at every width. It used to be phone-only on the map, with a chip rail under the header carrying the same destinations on a desktop, and, because the rail was never hidden on a phone, carrying most of them twice. It lives in shared.css rather than index.css because the launcher needs it too and does not load index.css. A second copy in home.css would have been two navigations that look identical until the day one of them changes. It scrolls horizontally. Eight destinations do not fit across a 390px phone and pretending otherwise means either 9px labels or a hamburger; a row that scrolls is the one degradation people already understand, and the item half-visible past the right edge is what teaches it. ═══════════════════════════════════════════════════════════════════════════ */ .tabbar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar); height:var(--tabbar-h); padding-bottom:env(safe-area-inset-bottom); background:var(--panel); border-top:1px solid var(--border); } @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .tabbar{ background:color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); } } .tabbar-scroll{ display:flex;align-items:stretch;width:100%; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .tabbar-scroll::-webkit-scrollbar{display:none} .tab{ flex:0 0 auto;min-width:72px;scroll-snap-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;padding:0 4px;background:none;border:none;cursor:pointer; text-decoration:none; color:var(--text-2);font-family:var(--font-sans); min-height:44px;position:relative; transition:color var(--dur-fast) ease; } .tab-icon{ font-size:21px;line-height:1;display:block; transition:transform var(--dur) var(--spring); } /* 10px was the smallest text in the app and it labelled the most important control in it. Anything a thumb aims at has to be readable by someone who left their glasses at home. */ .tab-label{font-size:13px;font-weight:600;line-height:1;white-space:nowrap} .tab:active .tab-icon{transform:scale(.86)} .tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--r-sm)} /* The sliding ink bar is gone with the rail. It positioned itself by index as a percentage of the whole bar, which stops being a location the moment the bar can scroll. The marker belongs to the tab. */ .tab-active{color:var(--accent);font-weight:700} .tab-active .tab-icon{transform:translateY(-1px) scale(1.1)} .tab-active::before{ content:"";position:absolute;top:0;left:14px;right:14px;height:2.5px; background:var(--accent);border-radius:0 0 3px 3px; } /* Filters carries an "you have filters on" marker. */ .tab-dot{ position:absolute;top:7px;right:16px; width:7px;height:7px;border-radius:50%; background:var(--info);display:none; } .tab-dot.show{display:block} /* ── THE COUNT ───────────────────────────────────────────────────────────── The other reason the far end of the bar went unvisited: nothing on it ever changed. A tab that looks identical on every visit is a tab worth checking once. Only ever drawn from a real number, see ppSetTabCount(), which removes the element at zero rather than hiding it. A badge that is on with nothing behind it costs more than it gains: the tab gets opened, found unchanged, and after that none of the badges work. --live rather than --accent. The accent green is what "you are here" means everywhere else in this bar, and a green dot on a tab you are NOT on reads as a second active tab. */ .tab-count{ position:absolute;top:5px;left:50%;margin-left:6px; min-width:17px;height:17px;padding:0 4px; display:flex;align-items:center;justify-content:center; border-radius:9px; background:var(--live,#E4587B);color:#FFFFFF; font-size:10px;font-weight:700;line-height:1; /* Ringed in the bar's own colour so it reads as sitting on top of the icon rather than as part of it. */ box-shadow:0 0 0 2px var(--panel); pointer-events:none; } /* ── THE MAP AND ITS TWO TOOLS ───────────────────────────────────────────── Cheapest and Filters are not destinations. Neither one does anything except to the map: one sorts its pubs by price, the other hides some of them. They used to sit in the middle of the bar between Ranks and What's On, four and seven places from the map they act on, which read as two more places to go. So they sit beside it, and one tinted shape runs behind all three. That is the whole idea: the bar gains a button but not a decision, because the three of them read as one control, the map, and the two ways of asking it something, rather than as three unrelated tabs. Drawn with a pseudo-element rather than a wrapper element, because a wrapper would become the flex child and take the desktop `flex:1 1 auto` sizing away from the tabs inside it. */ .tab-mg{position:relative} .tab-mg > span{position:relative;z-index:1} .tab-mg::after{ content:"";position:absolute;z-index:0; top:5px;bottom:5px;left:0;right:0; /* A raised surface tinted toward the brand rather than a wash of accent over whatever is behind it: --panel-2 is defined against --panel in both palettes, so the shape reads at the same strength in the dark and in the light. A transparent accent at 10% was legible on a white bar and almost invisible on a near-black one. */ background:color-mix(in srgb, var(--accent) 12%, var(--panel-2)); } /* The ends are rounded and inset; the middle is square so the three meet with no seam. */ .tab-mg-a::after{left:3px;border-radius:var(--r-md) 0 0 var(--r-md)} .tab-mg-c::after{right:3px;border-radius:0 var(--r-md) var(--r-md) 0} /* The active tab's ink bar is drawn at the very top of the tab, above the pill, so it has to clear it. */ .tab-mg.tab-active::after{background:color-mix(in srgb, var(--accent) 22%, var(--panel-2))} @supports not (background:color-mix(in srgb, red 10%, transparent)){ .tab-mg::after{background:var(--panel-2)} } /* On a screen wide enough to hold every tab, stop them stretching to fill it, eight items spread across 1600px is a row of unrelated buttons, not a nav. The cap has to be wide enough for every tab there actually is. It was 760px, written when the bar held nine; at eleven the row is 924px, so 164px of it overflowed a 760px box on a 1536px screen that had room to spare. And because the overflow was centred, half of that went off the LEFT edge, where no amount of scrolling reaches it, scrollLeft cannot go below zero. The first two tabs were simply unreachable on a desktop. `safe center` is the guard rather than the fix: it centres while the row fits and falls back to start-aligned the moment it does not, so an overflowing bar is always scrollable to both ends. Whoever adds a twelfth tab gets a scrollable bar on a narrow window instead of a hidden one. A browser too old to know the `safe` keyword throws the whole declaration out and uses the initial value, which is flex-start, so it gets a left-aligned bar rather than a centred one, and still reaches every tab. The degradation is cosmetic in the right direction. */ @media (min-width:601px){ .tabbar-scroll{max-width:1040px;margin:0 auto;justify-content:safe center} /* 1 1 auto, not 1 1 0: the tabs grow to share a wide bar but keep their content width as the floor. min-width is 76px because the widest label in the bar, "What's On", measures 65px, and 76 leaves it its padding. */ .tab{flex:1 1 auto;min-width:76px} } /* Body shrinks so nothing is hidden under the bar, and --tabbar-safe switches on for every floating element on the page at the same time. Scoped to pages that actually have one, app.html and admin.html carry their own nav, and an unconditional rule left 58px of dead space at the foot of both. */ body:has(.tabbar){ --tabbar-safe:var(--tabbar-h); padding-bottom:var(--tabbar-h); } @media (prefers-reduced-motion:reduce){ .tab-icon{transition:none} .tab-active .tab-icon{transform:none} } /* ═══════════════════════════════════════════════════════════════════════════ LEGACY TOKEN COMPATIBILITY index.css and app.css were written against their own names before this file existed. Rather than rewrite ~350 var() calls across 3,000 lines (and risk silent breakage), those names are aliased onto the new system here. Every existing rule picks up the new palette for free. These are deprecated. New work should use the semantic tokens above. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* index.css era */ --green:var(--brand-400); --green-dark:var(--brand-600); --green-dim:var(--brand-700); --amber:var(--warn); --red:var(--danger); --muted:var(--text-2); --panel2:var(--panel-2); /* app.css era */ --app-bg:var(--bg); --app-surface:var(--panel); --app-card:var(--panel-2); --app-border:var(--border); --app-text:var(--text); --app-muted:var(--text-2); --app-green:var(--accent); --app-green-dim:var(--brand-ghost); --app-danger:var(--danger); --app-danger-bg:var(--danger-soft); --app-radius:var(--r-lg); --nav-h:var(--tab-h); } /* ══════════════════════════════════════════════════════════════════════════ THE BASEMAP CANVAS MapLibre ships a 70KB stylesheet and every rule in it but two is for controls this app never renders, the compass, the scale bar, the zoom buttons, the attribution box, the logo. Leaflet draws all of those, and the GL layer is added with no interaction of its own: it is a canvas in the tile pane and nothing else. So the two rules that matter are here rather than in a vendored file, and the file is not shipped. If a MapLibre control is ever added to a page, add maplibre-gl.css back alongside it, do not copy rules out of it. ══════════════════════════════════════════════════════════════════════════ */ .maplibregl-map{position:relative;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)} .maplibregl-canvas{position:absolute;left:0;top:0} /* ── AND THE MAP FOR A DEVICE WITH NO WEBGL ──────────────────────────────── OpenStreetMap's own raster tiles, which come in one style: light. Under the dark theme they are inverted and turned back the right way round on the hue wheel, which is the old trick for making a light map dark, greens stay green, blues stay blue, and the paper goes to ink. It is visibly not the real dark style. It is also not a blank rectangle. */ .pp-basemap-raster{ /* What the tile pane's filter used to do for everything, done to the one layer it was ever meant for: hold the basemap back so the price pins are the most saturated thing on screen. */ filter:saturate(.45) contrast(.97); } .pp-basemap-dim{ filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.5); } /* ═══════════════════════════════════════════════════════════════════════════ CELTIC ORNAMENT Used sparingly and only on chrome, never on data. A price must stay a legible number; ornament belongs on rules, headers, the passport and empty states, where it sets tone without costing clarity. The motifs are the two that read as Irish without tipping into costume: the interlaced plait (the basis of all knotwork) and the triskele (the triple spiral from Newgrange). No shamrocks, no harps, no tricolour. Everything is an inline SVG data URI tinted with currentColor via a mask, so a single rule follows the theme instead of shipping two image variants. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Interlaced plait ────────────────────────────────────────────────────── Two mirrored sine waves crossing is the true basis of a Celtic plait; the over-under illusion comes from breaking one strand at each crossing. */ .knot-rule{ height:14px;width:100%;flex-shrink:0; background-color:var(--ornament); opacity:.5; -webkit-mask-image:var(--knot-svg); mask-image:var(--knot-svg); -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x; -webkit-mask-size:48px 14px; mask-size:48px 14px; } :root{ --knot-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M0 7 C 6 1, 18 1, 24 7 C 30 13, 42 13, 48 7'/%3E%3Cpath d='M0 7 C 6 13, 18 13, 24 7 C 30 1, 42 1, 48 7'/%3E%3C/g%3E%3C/svg%3E"); --triskele-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M24 24 C 24 14, 31 9, 37 12 C 42 15, 41 23, 34 24 C 30 24.5, 27 22, 27 19'/%3E%3C/g%3E%3Cg transform='rotate(120 24 24)'%3E%3Cpath d='M24 24 C 24 14, 31 9, 37 12 C 42 15, 41 23, 34 24 C 30 24.5, 27 22, 27 19'/%3E%3C/g%3E%3Cg transform='rotate(240 24 24)'%3E%3Cpath d='M24 24 C 24 14, 31 9, 37 12 C 42 15, 41 23, 34 24 C 30 24.5, 27 22, 27 19'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* A thinner rule for inside cards */ .knot-rule-sm{ height:10px; -webkit-mask-size:34px 10px; mask-size:34px 10px; opacity:.38 } /* Rule that fades at both ends, so it reads as ornament rather than a divider */ .knot-rule-fade{ -webkit-mask-composite:source-in; mask-composite:intersect; } /* ── Triskele ────────────────────────────────────────────────────────────── The Newgrange triple spiral. Used as the loading mark and the passport seal, the two places where a moment of ceremony is welcome. */ .triskele{ width:48px;height:48px;flex-shrink:0; background-color:var(--ornament); -webkit-mask-image:var(--triskele-svg); mask-image:var(--triskele-svg); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } @keyframes triskele-turn{ to{ transform:rotate(360deg) } } .triskele-spin{ animation:triskele-turn 2.6s linear infinite } /* The loading screen gets the spiral instead of a generic ring */ #loading .spinner{ width:52px;height:52px; border:none!important; background-color:var(--ornament); -webkit-mask-image:var(--triskele-svg); mask-image:var(--triskele-svg); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; animation:triskele-turn 2.6s linear infinite; } #loading{ background:var(--bg) } #loading p{ font-family:var(--font-display); letter-spacing:.14em;text-transform:uppercase; font-size:var(--t-sm);color:var(--text-3); } /* ── Brass hairline ──────────────────────────────────────────────────────── A single warm line under the header. Reads as a brass rail rather than a border, and costs nothing. */ .brass-rail{ height:1px;width:100%;flex-shrink:0; background:linear-gradient(90deg, transparent, var(--brass-500) 18%, var(--brass-300) 50%, var(--brass-500) 82%, transparent); opacity:.45; } /* ═══════════════════════════════════════════════════════════════════════════ THE WORDMARK It was set in Cinzel, an inscriptional Roman face, and it was the only place in the app that face appeared, a whole font file, on the critical path of every page, for eight letters in a header. It is now the same family as everything else and earns its distinction the way a grotesque wordmark does: the heaviest weight in the app, and tracked tight so the letters lock into one shape rather than spelling themselves out. ═══════════════════════════════════════════════════════════════════════════ */ .logo h1{ font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; font-size:var(--t-lg); } .logo p{ font-family:var(--font-sans); letter-spacing:.04em; font-size:var(--t-2xs); text-transform:uppercase; color:var(--text-3); } /* Every number in the app, one rule. Anything that renders a figure, a price, a count, a rank, a clock, is set here rather than in whichever stylesheet happens to own the component, so "what face do numbers use" has exactly one answer and changing it is one line. tabular-nums is the other half of the job: proportional figures make a column of prices ripple. */ .psb-value, .price-hero-num, .cheapest-price, .counter-nums, .pin-price, .tile-stat, .pp-stat-val, .op-total-num, .pbar-cur, .fp-max-out, .pf-hero-val, .pf-stat-val, .so-rank, .so-row-num, .so-price, .ex-card-price, .ex-card-when, .ex-person-price, .tab-count, .pp-badge-foot, .so-cheer-n, .ob-sw{ font-family:var(--font-num); font-variant-numeric:tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ SURFACES ═══════════════════════════════════════════════════════════════════════════ */ /* The brass wash across the top of every page and the warm sheen on every card are gone with the palette. They were the reason a "neutral" surface still measured warm: a 3.5% amber gradient over a panel is a tint on everything printed on it, including the text. A flat surface is the point. */ /* Passport gets the full treatment, it is the one screen that should feel like an object rather than a UI. */ .passport-panel .passport-header, #passport-panel .passport-header{ position:relative; } .passport-seal{ width:44px;height:44px; background-color:var(--brass-400); -webkit-mask-image:var(--triskele-svg); mask-image:var(--triskele-svg); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; opacity:.9; } /* Tagline sat on two lines in the header; it is a subtitle, not a paragraph. */ .logo p{ white-space:nowrap } @media (max-width:900px){ .logo p{ display:none } } /* The old measured priority+ toolbar, its overflow menu, the hamburger and the mobile drawer all lived here. They have been replaced by a single horizontally swipeable action rail, styled in index.css beside the rest of the map chrome it belongs to. */ @media (max-width:1024px){ .logo p{display:none} } @media (max-width:760px){ .logo h1{font-size:var(--t-base)} } /* ═══════════════════════════════════════════════════════════════════════════ PUB CRAWL: WHICH KIND? Two options and a paste box. Deliberately not a page: the answer is one tap and a page would mean a back button for a question that takes a second. It lives here rather than in home.css because it is no longer the home page's dialog. The Crawl tab is on all four pages, and it now raises this on every one of them, the launcher's tile and the tab bar are the same door, and there is exactly one copy of what is behind it. shared.js injects the markup wherever it is asked for. Depends on the animation below, which came with it. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes cc-fade{from{opacity:0}to{opacity:1}} .cc{ position:fixed;inset:0;z-index:var(--z-dialog); display:flex;align-items:flex-end;justify-content:center; padding:0; background:color-mix(in srgb, var(--bg) 76%, transparent); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:cc-fade .18s ease both; } .cc[hidden]{display:none} .cc-card{ position:relative; width:100%;max-width:520px; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); background:var(--panel); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0; box-shadow:var(--shadow-4); animation:cc-rise .26s var(--ease-out) both; } @keyframes cc-rise{from{transform:translateY(26px);opacity:.4}to{transform:none;opacity:1}} .cc-close{ position:absolute;top:12px;right:12px; width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--panel-2);border:1px solid var(--border); color:var(--text-2);font-size:19px;line-height:1;cursor:pointer; } .cc-close:hover{background:var(--hover);color:var(--text)} .cc-title{ font-family:var(--font-display); font-size:var(--t-xl);font-weight:700;letter-spacing:-.01em; color:var(--text);margin-bottom:14px;padding-right:40px; } .cc-opt{ display:flex;align-items:center;gap:12px;width:100%; padding:14px 14px;margin-bottom:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text);text-align:left;text-decoration:none; font-family:var(--font-sans);cursor:pointer; transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease; } .cc-opt:hover{border-color:var(--accent);background:var(--hover)} .cc-opt-ico{ flex-shrink:0;width:38px;height:38px;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;font-size:18px; background:var(--brand-ghost);border:1px solid var(--border); } .cc-opt-text{flex:1;min-width:0} .cc-opt-text strong{display:block;font-size:var(--t-base);font-weight:700} .cc-opt-text span{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:2px;line-height:1.4} .cc-opt-go{flex-shrink:0;color:var(--text-3);font-size:var(--t-md)} .cc-join{margin-top:4px;padding:13px 14px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-lg)} .cc-join[hidden]{display:none} .cc-join-lab{display:block;font-size:var(--t-xs);font-weight:700;color:var(--text-2);margin-bottom:7px} .cc-join-input{ width:100%;padding:11px 13px;min-height:46px; background:var(--bg);color:var(--text); border:1px solid var(--border);border-radius:var(--r-md); font-size:16px; /* never below 16px: iOS zooms the viewport on focus */ } .cc-join-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--brand-ring)} /* The link box is the second answer now, so its label needs a rule above it to read as a change of subject rather than as more of the list. */ .cc-join-lab-or{ margin-top:13px;padding-top:12px;border-top:1px solid var(--border); } /* ── PUBLIC CRAWLS ── A short list, capped at fifty rows by the query and realistically two or three. It scrolls rather than growing the card, because the paste box under it has to stay reachable on a phone. */ .cc-public{max-height:min(46vh,300px);overflow-y:auto;margin:-2px 0 2px} .cc-pub-note{font-size:var(--t-xs);color:var(--text-3);line-height:1.5;padding:8px 2px} .cc-pub-row{ display:flex;align-items:center;gap:11px; padding:10px 11px;margin-bottom:7px; background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md); color:var(--text);text-decoration:none; transition:border-color var(--dur-fast) ease; } .cc-pub-row:last-child{margin-bottom:0} .cc-pub-row:hover{border-color:var(--accent)} /* The night, first and in its own column: "Tonight" is what decides whether the rest of the row is worth reading. */ .cc-pub-when{ flex-shrink:0;width:66px; font-size:var(--t-xs);font-weight:700;color:var(--accent);line-height:1.25; } .cc-pub-text{flex:1;min-width:0} .cc-pub-text strong{ display:block;font-size:var(--t-base);font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .cc-pub-text span{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:2px} .cc-pub-go{ flex-shrink:0;padding:5px 12px;border-radius:var(--r-full); background:var(--brand-ghost);border:1px solid var(--border); font-size:var(--t-xs);font-weight:700;color:var(--accent); } .cc-pub-row:hover .cc-pub-go{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent)} .cc-join-msg{font-size:var(--t-xs);color:var(--danger);margin-top:6px;min-height:1px} .cc-join-msg:empty{display:none} .cc-join-btn{ width:100%;margin-top:9px;min-height:46px; background:var(--accent-solid);border:1px solid var(--accent-solid); border-radius:var(--r-full);color:var(--on-accent); font-family:var(--font-sans);font-size:var(--t-base);font-weight:700;cursor:pointer; } .cc-join-btn:hover{background:var(--brand-500)} @media (min-width:600px){ .cc{align-items:center;padding:20px} .cc-card{border-bottom:1px solid var(--border);border-radius:var(--r-xl,20px);padding-bottom:20px} } @media (prefers-reduced-motion:reduce){ .cc,.cc-card{animation:none} } /* ══════════════════════════════════════════════════════════════════════════ THE CONNECTION BANNER Sits above the tab bar rather than over the content: what it is reporting is worth knowing, and never worth covering the map with. Safe-area inset on top of the bar's own height so it clears the home indicator on an iPhone. ══════════════════════════════════════════════════════════════════════════ */ .pp-net-banner { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* On a phone it spans the screen; on a desktop a full-width bar reads as a system outage rather than a note about this tab. */ max-width: 520px; margin-inline: auto; z-index: 4000; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-radius: 12px; background: #2b2016; color: #ffe9c9; border: 1px solid rgba(255, 176, 74, 0.38); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); font-size: 14px; line-height: 1.35; /* Off-screen and inert until shown, so it never steals a tap it should not. */ transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; } .pp-net-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .pp-net-text { flex: 1; min-width: 0; } .pp-net-retry { flex-shrink: 0; min-height: 36px; /* a real touch target, not a text link */ padding: 7px 14px; border-radius: 9px; border: none; background: #ffb04a; color: #2b2016; font: inherit; font-weight: 700; cursor: pointer; } .pp-net-retry:active { transform: scale(0.97); } .pp-net-retry:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* A page with no tab bar (admin) has nothing to clear. */ body:not(:has(.tabbar)) .pp-net-banner { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } @media (prefers-reduced-motion: reduce) { .pp-net-banner { transition: opacity 0.2s ease; transform: none; } } /* ── SKIP LINK ── Off-screen until focused, then the first thing a keyboard lands on. It lives here rather than in one page's stylesheet because both the launcher and the map need it, and the map needs it most: its pins are focusable controls now, and there are seventy of them between the header and the nav. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:5000; padding:10px 16px;border-radius:var(--r-md, 10px); background:var(--accent-solid);color:var(--on-accent); font-size:var(--t-sm, 14px);font-weight:700;text-decoration:none; } .skip-link:focus{left:12px;top:12px} /* ── THE ACCOUNT MENU ───────────────────────────────────────────────────── These rules lived in index.css, which is loaded by three pages, app.html, map.html and whats-on.html. mountAccountMenu() in shared.js builds this menu on eight, and it is the only route any of them has to Settings, Your listings and Log out. So on feed.html, leaderboard.html, mine.html and profile.html the menu was created, opened, and rendered with no styling whatsoever: `position: static`, no panel, no border, no background. It did not fail to appear, it appeared as a column of bare text overlapping the header and running off the top of the page, on production, including on profile.html, which is the page a stranger opens from a WhatsApp link. Nothing was wrong with the rules. They were in a file four of the pages that need them do not load. shared.js is what creates this markup, so shared.css is where its styling belongs, the same rule the README states for the scripts, applied to the stylesheet. Anchored to the header, not the button, so it cannot be clipped by the header's own overflow on a narrow screen. Both headers this mounts inside establish a containing block for it: map.html's is position:relative and the .app-header the other pages use is position:fixed. */ /* ── The menu ────────────────────────────────────────────────────────────── Anchored to the header, not the button, so it cannot be clipped by the header's own overflow on a narrow screen. */ .account-menu{ position:absolute;top:calc(100% + 6px);right:12px;z-index:1600; min-width:236px;max-width:calc(100vw - 24px); background:var(--panel);border:1px solid var(--border); border-radius:var(--r-md);box-shadow:var(--shadow-4); padding:6px;overflow:hidden; } .account-menu[hidden]{display:none} .acct-head{padding:10px 12px 9px;border-bottom:1px solid var(--border);margin-bottom:6px} .acct-name{ font-size:var(--t-base);font-weight:700;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .acct-sub{font-size:var(--t-sm);color:var(--text-2);margin-top:2px;line-height:1.35} .acct-section{ padding:9px 12px 4px;font-size:var(--t-sm);font-weight:700; color:var(--text-3); } .acct-item{ display:flex;align-items:center;gap:11px;width:100%; padding:0 12px;min-height:44px; background:none;border:none;border-radius:var(--r-sm); color:var(--text);font-family:var(--font-sans); font-size:var(--t-base);font-weight:500; text-align:left;text-decoration:none;cursor:pointer; transition:background var(--dur-fast) ease; } .acct-item:hover{background:var(--hover)} .acct-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .acct-ico{font-size:16px;line-height:1;width:20px;text-align:center;flex-shrink:0} .acct-item-primary{background:var(--accent-solid);color:var(--on-accent);font-weight:700} .acct-item-primary:hover{background:var(--brand-500)} .acct-item-danger{color:var(--warn)} /* The phone override travels with the rules it overrides. It was left behind in index.css's 600px block once, which is how a menu can be correct on a desktop and pinned off the side of a phone. */ @media (max-width:600px){ .account-menu{right:8px;left:8px;min-width:0} } /* ── BADGES ─────────────────────────────────────────────────────────────── Drawn in two places, the passport on map.html and the public passport at /@handle, so the rules live here rather than in either page's stylesheet. The locked ones are most of this grid for most people, and how they look is the whole design problem: too faint and the wall reads as broken, too loud and nothing signals which ones are actually earned. So a locked square keeps its full border and background and loses only the colour and some of the glyph's opacity, and the earned ones gain a brass tint rather than the locked ones losing one. Three columns at every width. Four fits a desktop and makes the same wall two rows shorter, but this card is also a screenshot people send, it wants the same shape everywhere. */ .pp-badge-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; list-style:none;margin:0;padding:0; } .pp-badge{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px; padding:11px 6px 9px;text-align:center; border-radius:14px; /* A token, not rgba(0,0,0,.35). The black wash was lifted from .pp-stat in index.css, where it is correct because it only ever sits on the passport card and that card is dark in both themes. This grid also draws on profile.html, which is a white page on the parchment theme, and there the same wash rendered ten charcoal blocks with grey text on them, which is both ugly and under 3:1. --panel-2 is the raised-surface token and follows the theme. */ background:var(--panel-2); border:1px solid var(--border); /* Every square the same height, not just every square in a row. A grid row stretches to its own tallest item, so an earned badge carrying a two-line note ("Mark your first pub visited") made its row taller than the row of locked ones under it reading "3 of 10", and a wall of badges with three different row heights reads as a layout bug rather than as a wall. The floor is the two-line case; anything shorter centres inside it. */ min-height:88px; } .pp-badge-icon{ font-size:23px;line-height:1; /* Greyed rather than hidden: the shape of a badge you have not got is the thing that makes you want it. */ filter:grayscale(1);opacity:.55; } .pp-badge-name{ font-size:11px;font-weight:700;line-height:1.2;color:var(--text-2); letter-spacing:.2px; } .pp-badge-foot{ font-size:10px;font-weight:600; color:var(--text-3);line-height:1.2; } .pp-badge.is-earned{ background:var(--brass-ghost); border-color:var(--brass-500); } .pp-badge.is-earned .pp-badge-icon{filter:none;opacity:1} /* --ornament, not --brass-300. brass-300 is the *light* end of the brass ramp and it is ink here: on the dark passport card it reads, and on parchment it is #C79E4C on an almost-white wash, about 2:1, which is a gold-on-cream badge name that the people most likely to be reading this in a dark pub cannot make out at all. --ornament is brass-500 in both themes and clears 4.5:1 against both grounds. */ .pp-badge.is-earned .pp-badge-name{color:var(--ornament)} .pp-badge.is-earned .pp-badge-foot{ color:var(--text-2); /* The earned squares carry their note rather than a ratio, and a note is a sentence, it wraps where a "6 of 10" never does. Two lines is the cap; past that the grid rows stop lining up. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } .pp-badge-summary{ font-size:12px;font-weight:600;color:var(--text-2); text-align:right;max-width:62%;line-height:1.3; } /* Under about 340px, an SE held in one hand, three columns puts "Local Knowledge" on three lines and the row heights stop matching. Two columns is taller and readable, which is the right way round. */ @media (max-width:340px){ .pp-badge-grid{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:no-preference){ .pp-badge{transition:background .2s ease,border-color .2s ease} } /* ══════════════════════════════════════════════════════════════════════════ REPORT AND BLOCK The sheet built by ppSafetyMenu in shared.js. It lives here rather than in app.css or index.css because all four pages raise it and only shared.css is on all four. Bottom sheet on a phone, centred card from 560px up. Everything is a full width row with a big target: this is a menu people reach for when they are upset, one-handed, and it should not need aiming. ══════════════════════════════════════════════════════════════════════════ */ .pp-safety-overlay{ position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.62); display:flex; align-items:flex-end; justify-content:center; padding:0; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .pp-safety-sheet{ width:100%; max-width:520px; background:var(--panel); border:1px solid var(--border); border-bottom:0; border-radius:16px 16px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px)); max-height:86vh; overflow-y:auto; box-shadow:0 -12px 40px rgba(0,0,0,.5); } @media (min-width:560px){ .pp-safety-overlay{align-items:center; padding:24px} .pp-safety-sheet{border-radius:16px; border-bottom:1px solid var(--border)} } .pp-safety-title{ font-weight:700; font-size:1.05rem; color:var(--text); margin:0 0 4px; padding:0 4px 10px; border-bottom:1px solid var(--border); } .pp-safety-note{ color:var(--text-2); font-size:.9rem; line-height:1.5; margin:12px 4px 14px; } /* One row per action. Two lines where there is a consequence worth stating: the strong is what happens, the em is what it means. */ .pp-safety-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin:8px 0; font:inherit; font-size:.95rem; cursor:pointer; min-height:52px; } .pp-safety-row strong{display:block; font-weight:600} .pp-safety-row em{ display:block; font-style:normal; color:var(--text-3); font-size:.82rem; margin-top:2px; line-height:1.35; } .pp-safety-row-icon{font-size:1.15rem; flex:0 0 auto; line-height:1} .pp-safety-row:hover{background:var(--n-750); border-color:var(--border-strong)} .pp-safety-row:focus-visible{outline:2px solid var(--brand-400); outline-offset:2px} .pp-safety-row-danger{ background:var(--danger-soft); border-color:rgba(var(--danger-rgb),.42); color:var(--danger); } .pp-safety-row-danger:hover{background:rgba(var(--danger-rgb),.22)} .pp-safety-row-danger em{color:rgba(var(--danger-rgb),.85)} .pp-safety-row-cancel{ justify-content:center; background:transparent; color:var(--text-2); border-color:var(--border); margin-top:12px; } .pp-safety-detail{ width:100%; box-sizing:border-box; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:0 0 4px; font:inherit; font-size:.92rem; resize:vertical; } .pp-safety-detail:focus{outline:none; border-color:var(--brand-400)} /* THE OVERFLOW BUTTON ON SOMEBODY ELSE'S MESSAGE Deliberately quiet until it is wanted. It is a real focusable button rather than a long-press only affordance, because a menu that can only be opened by holding a finger down is a menu that does not exist for anybody using a keyboard, or for a store reviewer looking for the report flow. */ .pp-safety-btn{ background:transparent; border:0; padding:2px 6px; margin-left:4px; color:var(--text-3); font-size:1rem; line-height:1; cursor:pointer; border-radius:6px; opacity:.5; transition:opacity .15s ease, color .15s ease; vertical-align:middle; } .pp-safety-btn:hover, .pp-safety-btn:focus-visible{opacity:1; color:var(--text); background:var(--n-750)} .pp-safety-btn:focus-visible{outline:2px solid var(--brand-400); outline-offset:1px} /* On a touch screen there is no hover to reveal it with, and a control at half opacity beside a message reads as disabled rather than as available. */ @media (hover:none){ .pp-safety-btn{opacity:.75} } /* The last-resort toast, used only on a page that has neither showToast nor appToast, the launcher, today. */ .pp-safety-toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:9500; max-width:min(92vw,420px); background:var(--panel-2); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:11px 16px; font-size:.9rem; line-height:1.4; box-shadow:0 8px 28px rgba(0,0,0,.45); } /* A blocked person's row, where one is still drawn, the friends list keeps the row so it can be unblocked, and greys it rather than hiding it. */ .pp-blocked-row{opacity:.45} .pp-blocked-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border:1px solid var(--border-strong); border-radius:99px; color:var(--text-3); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle; } /* ═══════════════════════════════════════════════════════════════════════════ AN EMPTY STATE ON A TALL SCREEN Every list in this app has one: no listings, nobody on the board yet, nothing from your friends. They were written for a phone, where a 300px card fills most of what is left under the header, and on a laptop they pinned themselves to the top of the window with three or four hundred pixels of nothing between them and the nav. A page that has finished drawing should not look like a page that stopped halfway. So on a screen tall enough for it to matter, the card takes a share of the height and centres what it is holding. Nothing is added to it and nothing moves on a phone: it is the same card, given the room it is sitting in. Stated once, here, because three stylesheets own these three classes and every page that draws any of them loads this file. A copy in each would be three rules to keep in step and two that eventually would not be. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-height:760px) and (min-width:700px){ .so-empty, .mn-empty, .app-empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:42vh; } /* These two are centred text rather than flex boxes, so the switch above would otherwise stretch their children to full width. */ .so-empty > *, .mn-empty > *{max-width:100%} }