/* look13-icons.css — v468 · A · icons with color, in Jetsy's own look.
   Joe, Fri 23 Oct 2026, 5:05pm: "Make 5 major upgrades to the look of our dashboard make it look like a billion dollar crm …".
   Every icon tile — card headers, the headings and fold bars on a tab, the Business tiles, Extra Features, Today's "Your cards",
   Setup, the More sheet — becomes a small rounded tile FILLED with the color of its kind (look13-icons.js writes data-l13c) and
   the glyph in white, the way phone does it. Sizes and places stay exactly as they were (look6 / look12 set them).
   Colors: Apple's system colors, the dark values here and the light values under html.je-light (written with "je-light" in the
   rule so easy2.js leaves them as they are). White glyphs use the keyword `white` (easy2 flips only #hex and rgb()).
   Off: localStorage nolook13 = 1. */

html:not(.nolook13){--l13-green:#3ED598;--l13-orange:#FFB259;--l13-blue:#4BA3F5;--l13-red:#F25F5C;--l13-teal:#36C2B4;--l13-pink:#F2668B;--l13-indigo:#7E86F5;--l13-purple:#A58BFA;--l13-yellow:#F5C451;--l13-gray:#8A94A6}
html.je-light:not(.nolook13){--l13-green:#1FA971;--l13-orange:#D9822B;--l13-blue:#1F6FD1;--l13-red:#D93B3B;--l13-teal:#1E9E92;--l13-pink:#D93D68;--l13-indigo:#5560D8;--l13-purple:#7C5CD6;--l13-yellow:#C99A1E;--l13-gray:#8A94A6}

html:not(.nolook13) [data-l13c="green"]{--l13-c:var(--l13-green)}
html:not(.nolook13) [data-l13c="orange"]{--l13-c:var(--l13-orange)}
html:not(.nolook13) [data-l13c="blue"]{--l13-c:var(--l13-blue)}
html:not(.nolook13) [data-l13c="red"]{--l13-c:var(--l13-red)}
html:not(.nolook13) [data-l13c="teal"]{--l13-c:var(--l13-teal)}
html:not(.nolook13) [data-l13c="pink"]{--l13-c:var(--l13-pink)}
html:not(.nolook13) [data-l13c="indigo"]{--l13-c:var(--l13-indigo)}
html:not(.nolook13) [data-l13c="purple"]{--l13-c:var(--l13-purple)}
html:not(.nolook13) [data-l13c="yellow"]{--l13-c:var(--l13-yellow)}
html:not(.nolook13) [data-l13c="gray"]{--l13-c:var(--l13-gray)}

/* ---- the tile: the color fills it, no tinted ring, the glyph white ---- */
html:not(.nolook13) body section.bc>.bc-hd h2>.ji[data-l13c]:first-child,
html:not(.nolook13) body main .h>h2>.j6-ji[data-l13c],
html:not(.nolook13) body main summary.cb-s>.cb-nm>.j6-ji[data-l13c],
html:not(.nolook13) body .lx-t .lx-m[data-l13c],
html:not(.nolook13) body #lx .lx-t .lx-m[data-l13c],
html:not(.nolook13) body .cmk-m.j6-mi[data-l13c],
html:not(.nolook13) body .tj-t .tj-ic[data-l13c]{background:var(--l13-c)!important;background-image:none!important;box-shadow:none!important;color:white!important;border:0!important}

/* corners in proportion, like the phone's own icons (≈ 22% of the side) */
html:not(.nolook13) body section.bc>.bc-hd h2>.ji[data-l13c]:first-child{border-radius:7px!important}
html:not(.nolook13) body main section.bc.tc-collapsed>.bc-hd h2>.ji[data-l13c]:first-child{border-radius:7.5px!important}
html:not(.nolook13) body main .h>h2>.j6-ji[data-l13c]{border-radius:6.5px!important}
html:not(.nolook13) body main summary.cb-s>.cb-nm>.j6-ji[data-l13c]{border-radius:6px!important}
html:not(.nolook13) body .lx-t .lx-m[data-l13c],
html:not(.nolook13) body #lx .lx-t .lx-m[data-l13c]{border-radius:8.5px!important}
html:not(.nolook13) body .cmk-m.j6-mi[data-l13c]{border-radius:8px!important}
html:not(.nolook13) body .tj-t .tj-ic[data-l13c]{border-radius:6.5px!important}

/* the glyph inside a Business / Extra Features tile: 22 of 36, in Jetsy's own look (the tile itself keeps its size) */
html:not(.nolook13) body .lx-t .lx-m[data-l13c] .ji,
html:not(.nolook13) body #lx .lx-t .lx-m[data-l13c] .ji{width:22px!important;height:22px!important}
html:not(.nolook13) body .cmk-m.j6-mi[data-l13c] .ji{width:20px!important;height:20px!important}

/* the glyph (jicons draws an orange line, a soft blue wash 4FA8FF and a few solid orange dots): every line and dot white, the wash a
   light white wash, a white detail drawn on an orange dot ("fff") takes the tile's color so it still shows. The selectors name the
   colors without their "#" on purpose: easy2.js rewrites every "#hex" in a rule's text for light mode, selectors included. */
html:not(.nolook13) body [data-l13c] svg [stroke]:not([stroke="none"]){stroke:white!important}
html:not(.nolook13) body [data-l13c] svg [fill]:not([fill="none"]):not([fill*="4FA8FF"]):not([fill$="fff"]){fill:white!important}
html:not(.nolook13) body [data-l13c] svg [fill*="4FA8FF"]{fill:white!important;fill-opacity:.3!important}
html:not(.nolook13) body [data-l13c] svg [fill$="fff"]{fill:var(--l13-c)!important}
html:not(.nolook13) body .tj-t .tj-ic[data-l13c] svg{stroke:white!important}
/* yellow is too light for white lines: a dark glyph, as the phone does on light tiles */
html:not(.nolook13) body [data-l13c="yellow"]{color:black!important}
html:not(.nolook13) body [data-l13c="yellow"] svg [stroke]:not([stroke="none"]),
html:not(.nolook13) body .tj-t .tj-ic[data-l13c="yellow"] svg{stroke:black!important;stroke-opacity:.82}
html:not(.nolook13) body [data-l13c="yellow"] svg [fill]:not([fill="none"]):not([fill*="4FA8FF"]):not([fill$="fff"]){fill:black!important;fill-opacity:.82!important}
html:not(.nolook13) body [data-l13c="yellow"] svg [fill*="4FA8FF"]{fill:black!important;fill-opacity:.16!important}

/* ---- the More sheet: the tab's icon sits in its tile (the tile grows around the glyph, the row does not move) ---- */
html:not(.nolook13) body .je2-sh .je2-tab>svg[data-l13c]:first-child{box-sizing:content-box!important;width:18px!important;height:18px!important;padding:5.5px!important;margin:-4px!important;border-radius:6.5px!important;background:var(--l13-c)!important;color:white!important;stroke:white!important;flex:none}
html:not(.nolook13) body .je2-sh .je2-tab>svg[data-l13c="yellow"]:first-child{color:black!important;stroke:black!important}

/* ---- light mode: the same tiles (the color variables above already switch); keep the glyph white against easy2's flips ---- */
html.je-light:not(.nolook13) body section.bc>.bc-hd h2>.ji[data-l13c]:first-child,
html.je-light:not(.nolook13) body main .h>h2>.j6-ji[data-l13c],
html.je-light:not(.nolook13) body main summary.cb-s>.cb-nm>.j6-ji[data-l13c],
html.je-light:not(.nolook13) body .lx-t .lx-m[data-l13c],
html.je-light:not(.nolook13) body #lx .lx-t .lx-m[data-l13c],
html.je-light:not(.nolook13) body .cmk-m.j6-mi[data-l13c],
html.je-light:not(.nolook13) body .tj-t .tj-ic[data-l13c]{background:var(--l13-c)!important;background-image:none!important;box-shadow:none!important;color:white!important;border:0!important}
html.je-light:not(.nolook13) body .je2-sh .je2-tab>svg[data-l13c]:first-child{background:var(--l13-c)!important;color:white!important;stroke:white!important}
html.je-light:not(.nolook13) body [data-l13c] svg [stroke]:not([stroke="none"]){stroke:white!important}
html.je-light:not(.nolook13) body [data-l13c] svg [fill]:not([fill="none"]):not([fill*="4FA8FF"]):not([fill$="fff"]){fill:white!important}
html.je-light:not(.nolook13) body [data-l13c] svg [fill*="4FA8FF"]{fill:white!important;fill-opacity:.3!important}
html.je-light:not(.nolook13) body [data-l13c] svg [fill$="fff"]{fill:var(--l13-c)!important}
html.je-light:not(.nolook13) body .tj-t .tj-ic[data-l13c] svg{stroke:white!important}
html.je-light:not(.nolook13) body [data-l13c="yellow"],
html.je-light:not(.nolook13) body .je2-sh .je2-tab>svg[data-l13c="yellow"]:first-child{color:black!important;stroke:black!important}
html.je-light:not(.nolook13) body [data-l13c="yellow"] svg [stroke]:not([stroke="none"]),
html.je-light:not(.nolook13) body .tj-t .tj-ic[data-l13c="yellow"] svg{stroke:black!important;stroke-opacity:.82}
html.je-light:not(.nolook13) body [data-l13c="yellow"] svg [fill]:not([fill="none"]):not([fill*="4FA8FF"]):not([fill$="fff"]){fill:black!important;fill-opacity:.82!important}
html.je-light:not(.nolook13) body [data-l13c="yellow"] svg [fill*="4FA8FF"]{fill:black!important;fill-opacity:.16!important}