/* work-order-view.css -- design system, app chrome, grouping-engine chrome, selection bar, Group Items + warranty modals, tooltip / toast / menus

   Part 1 of 6. The stylesheet reached 79KB in one file, and the push tooling
   takes whole-file content, so every rule change re-emitted the whole thing.
   Split on the section boundaries that were already there. Load order is the
   cascade -- it is fixed in work-order-view.html and must not be reordered.
   No rule changed in this split. */

/* ============================================================
   DESIGN SYSTEM — lifted from work-orders-board.html
   (tokens, light/dark, appbar, chips, tooltip, toast, menus).
   ============================================================ */
:root{
  --bg:#121212;--paper:#1e2228;--paper-hover:#22262d;--panel:#181b20;
  --text:rgba(231,227,252,.87);--text-secondary:rgba(231,227,252,.60);--text-disabled:rgba(231,227,252,.38);
  --border:rgba(231,227,252,.12);--border-2:rgba(231,227,252,.20);
  --blue:#64a0f6;--blue-16:rgba(100,160,246,.16);--blue-24:rgba(100,160,246,.24);
  --green:#76c73b;--green-15:rgba(118,199,59,.15);
  --amber:#f4b840;--amber-15:rgba(244,184,64,.15);
  --red:#ea3429;--red-15:rgba(234,52,41,.15);
  --secondary:#9aa0a6;--secondary-15:rgba(154,160,166,.15);
  --hover:rgba(255,255,255,.06);--fill:rgba(255,255,255,.08);--fill-strong:rgba(255,255,255,.13);
  --track:rgba(255,255,255,.2);--scroll:rgba(255,255,255,.14);
}
html.light{
  --bg:#eef1f5;--paper:#ffffff;--paper-hover:#f6f8fb;--panel:#f0f2f6;
  --text:rgba(24,26,32,.90);--text-secondary:rgba(24,26,32,.58);--text-disabled:rgba(24,26,32,.36);
  --border:rgba(20,22,28,.12);--border-2:rgba(20,22,28,.20);
  --blue:#2f6fd0;--blue-16:rgba(47,111,208,.12);--blue-24:rgba(47,111,208,.18);
  --green:#4e9a2f;--green-15:rgba(78,154,47,.15);
  --amber:#b0790f;--amber-15:rgba(176,121,15,.16);
  --red:#d32f2f;--red-15:rgba(211,47,47,.13);
  --secondary:#5a6068;--secondary-15:rgba(90,96,104,.13);
  --hover:rgba(20,22,28,.05);--fill:rgba(20,22,28,.06);--fill-strong:rgba(20,22,28,.11);
  --track:rgba(20,22,28,.22);--scroll:rgba(20,22,28,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;overflow:hidden;transition:background .2s ease,color .2s ease;}
/* width/height reserve the icon's box BEFORE its SVG exists. <iconify-icon>
   is a custom element that renders asynchronously, so on any innerHTML
   rebuild every icon is momentarily zero-sized - headers and buttons
   collapse, everything below slides up, then snaps back a frame later.
   mdi icons are square, so 1em matches their rendered size exactly. */
iconify-icon{display:inline-block;vertical-align:middle;width:1em;height:1em;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}

.shell{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.appbar{background:var(--paper);flex-shrink:0;border-bottom:1px solid var(--border);}
.appbar-row1{display:flex;align-items:center;gap:12px;height:60px;padding:0 24px;}
.appbar-row2{display:flex;align-items:center;gap:6px;height:56px;padding:0 24px 8px;overflow:hidden;transition:height .18s ease,padding .18s ease,opacity .15s ease;}
.shell.menu-collapsed .appbar-row2{height:0;padding-top:0;padding-bottom:0;opacity:0;pointer-events:none;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand .logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--blue),#3f6fd0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
.brand .name{font-weight:700;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;}
.search-pill{display:flex;align-items:center;gap:8px;background:var(--hover);border:1px solid var(--border);border-radius:8px;height:38px;padding:0 12px;color:var(--text-secondary);min-width:230px;font-size:13px;}
.search-pill .kbd{margin-left:auto;background:var(--fill);border-radius:4px;padding:1px 6px;font-size:11px;}
.spacer{flex:1;}
.icon-btn{position:relative;width:40px;height:40px;border-radius:10px;background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:22px;}
.icon-btn:hover{background:var(--hover);color:var(--text);}
.badge{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:1;padding:2px 4px;border-radius:8px;min-width:16px;text-align:center;}
.badge.blue{background:var(--blue);}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3f6fd0);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-left:6px;}
.topnav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;border-radius:21px;color:var(--text-secondary);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;}
.topnav-item iconify-icon{font-size:20px;}
.topnav-item .chev{font-size:18px;margin-left:-2px;}
.topnav-item:hover:not(.active){background:var(--hover);color:var(--text);}
.topnav-item.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(100,160,246,.35);}
.quick-quote-btn{margin-left:auto;background:var(--green);color:#fff;border:none;border-radius:5px;padding:9px 20px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:8px;}
.quick-quote-btn iconify-icon{font-size:18px;}
.quick-quote-btn:hover{filter:brightness(1.05);}
.chrome-toggle{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-2);color:var(--text-secondary);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.chrome-toggle:hover{color:var(--text);border-color:var(--blue);}
.chrome-toggle iconify-icon{font-size:18px;}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-secondary);white-space:nowrap;cursor:pointer;}
.switch .track{width:34px;height:20px;border-radius:20px;background:var(--track);position:relative;transition:.2s;}
.switch .thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;}
.switch.on .track{background:var(--blue);} .switch.on .thumb{left:16px;}
.btn-text{background:none;border:none;color:var(--blue);font-weight:600;font-size:13px;text-transform:uppercase;padding:8px 10px;}

/* prototype view switcher */
.proto-switch{display:flex;align-items:center;gap:14px;padding:9px 24px;background:var(--panel);border-bottom:1px solid var(--border);flex-shrink:0;}
.proto-switch .plabel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-disabled);display:flex;align-items:center;gap:6px;}
.proto-switch .plabel iconify-icon{font-size:15px;}
.proto-seg{display:inline-flex;border:1px solid var(--border-2);border-radius:8px;overflow:hidden;}
.proto-seg button{background:transparent;border:none;color:var(--text-secondary);padding:8px 18px;font-size:12.5px;font-weight:600;}
.proto-seg button.active{background:var(--blue);color:#fff;}
.proto-switch .hint{margin-left:auto;font-size:12px;color:var(--text-secondary);font-style:italic;}
.nw-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--amber);font-weight:600;}
.nw-legend iconify-icon{font-size:13px;}
/* example scenario seg (ledger only) */
.ex-wrap{display:flex;align-items:center;gap:8px;}
body.mode-classic .ex-wrap{display:none;}
.ex-wrap .exlabel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-disabled);}
/* ============================================================
   GROUPING ENGINE (v10) — line items render from a JS model so
   groups can be created / renamed / re-populated live.
   ============================================================ */
body.scn-empty #lvGroups{display:none;}
.lg-ungrouped .lg-sub:first-child .lg-sub-head{border-top:none;}
.ug-banner{display:flex;align-items:center;gap:9px;background:var(--blue-16);border:1px solid var(--blue-24);border-radius:8px;padding:9px 14px;margin-bottom:14px;font-size:12.5px;color:var(--text);}
.ug-banner iconify-icon{font-size:17px;color:var(--blue);}
.ug-banner .ug-group-btn{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border:none;border-radius:6px;padding:7px 13px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.ug-banner .ug-group-btn iconify-icon{font-size:15px;color:#fff;}
.ug-banner .ug-group-btn:hover{filter:brightness(1.05);}
/* row selection */
.lg-table th.rowcbx,.lg-table td.rowcbx{width:34px;padding-left:14px;padding-right:0;}
.lg-table td.rowcbx .cbx{cursor:pointer;}
.lg-table tr.sel td{background:var(--blue-16);}
.lg-ghead .cbx{cursor:pointer;}
/* inline group title editing */
.lg-gtitle-input{background:var(--bg);border:1px solid var(--blue);border-radius:6px;padding:5px 9px;font-family:inherit;font-size:14px;font-weight:700;color:var(--text);outline:none;min-width:190px;}
.lg-empty-row{padding:16px;font-size:12.5px;color:var(--text-secondary);font-style:italic;background:var(--paper);}
/* selection action bar — sits directly above the persistent money bar */
.sel-bar{display:none;align-items:center;gap:12px;flex-shrink:0;padding:10px 22px;background:var(--blue-16);border-top:1px solid var(--blue-24);}
.sel-bar.open{display:flex;}
.sel-bar .n{font-size:13px;font-weight:700;color:var(--text);}
.sel-bar .hint{font-size:12px;color:var(--text-secondary);font-style:italic;}
.sel-bar .sb-acts{margin-left:auto;display:flex;gap:8px;}
.sb-btn{display:flex;align-items:center;gap:6px;border-radius:7px;padding:8px 15px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border:1px solid var(--border-2);background:transparent;color:var(--text);}
.sb-btn iconify-icon{font-size:16px;}
.sb-btn:hover{border-color:var(--blue);}
.sb-btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;} .sb-btn.pri:hover{filter:brightness(1.05);}
/* Group Items modal (opened by the bottom-right Group Items button) */
.gm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;align-items:flex-start;justify-content:center;padding:48px 24px;}
.gm-overlay.open{display:flex;}
.gm-modal{background:var(--bg);border:1px solid var(--border-2);border-radius:12px;width:100%;max-width:720px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.gm-head{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.gm-head iconify-icon.gh-i{font-size:20px;color:var(--blue);margin-right:10px;}
.gm-head h3{font-size:16px;font-weight:700;color:var(--text);margin:0;}
.gm-head .gh-x{margin-left:auto;color:var(--text-secondary);font-size:22px;cursor:pointer;padding:4px;border-radius:6px;}
.gm-head .gh-x:hover{background:var(--hover);color:var(--text);}
.gm-name{padding:16px 20px 6px;flex-shrink:0;}
.gm-field{position:relative;}
.gm-field label{position:absolute;top:-7px;left:9px;background:var(--bg);padding:0 4px;font-size:11px;color:var(--text-secondary);line-height:1;z-index:1;}
.gm-field input{width:100%;background:transparent;border:1px solid var(--border-2);border-radius:6px;padding:12px 11px;font-size:13.5px;color:var(--text);font-family:inherit;outline:none;}
.gm-field input:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.gm-sub{padding:4px 20px 10px;font-size:12px;color:var(--text-secondary);flex-shrink:0;}
.gm-list{overflow-y:auto;flex:1;min-height:0;padding:0 20px 8px;}
.gm-list::-webkit-scrollbar{width:6px;} .gm-list::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:3px;}
.gm-tsec{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-disabled);margin:12px 0 6px;}
.gm-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border);border-radius:7px;margin-bottom:6px;cursor:pointer;background:var(--paper);}
.gm-row:hover{border-color:var(--border-2);}
.gm-row.on{background:var(--blue-16);border-color:var(--blue-24);}
.gm-row .nm{font-size:13px;color:var(--text);font-weight:500;}
.gm-row .in{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text-secondary);background:var(--fill);padding:2px 8px;border-radius:10px;}
.gm-row .amt{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--text);}
.gm-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;}
.gm-foot .cnt{font-size:12px;color:var(--text-secondary);}
.gm-foot .btns{margin-left:auto;display:flex;gap:8px;}
.gm-btn{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:9px 16px;border-radius:7px;border:1px solid var(--border-2);background:transparent;color:var(--text);}
.gm-btn:hover{border-color:var(--blue);}
.gm-btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;} .gm-btn.pri:hover{filter:brightness(1.05);}
.gm-btn.pri:disabled{opacity:.45;cursor:not-allowed;filter:none;}
/* empty-WO scenario: no items at all — everything hidden, empty state shown,
   labor + money + bottom bar zeroed via JS. Two ways forward: Add Item (v30:
   the real dropdown, was a green Add Items pill) / Add Group. */
.lv-empty{display:none;flex-direction:column;align-items:center;gap:7px;background:var(--paper);border:1px dashed var(--border-2);border-radius:8px;padding:52px 24px;text-align:center;}
body.scn-empty .lv-empty{display:flex;}
body.scn-empty .lv-main>.lg-group,body.scn-empty .build-est{display:none;}
.lv-empty iconify-icon.big{font-size:44px;color:var(--text-disabled);}
.lv-empty .t{font-size:15px;font-weight:700;color:var(--text);}
.lv-empty .s{font-size:12.5px;color:var(--text-secondary);max-width:430px;line-height:1.5;}
.lv-empty .es-btns{display:flex;gap:10px;margin-top:12px;}
.es-group-btn{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border-2);color:var(--text);border-radius:20px;padding:8px 16px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2px;}
.es-group-btn iconify-icon{font-size:17px;color:var(--blue);}
.es-group-btn:hover{border-color:var(--blue);}
/* v30: the empty state's Add Item trigger, replacing the green Add Items pill.
   It opens the SAME #addItemMenu the add bar opens, so it takes that button's
   blue plus and chevron, and the pill geometry of the Add Group button beside
   it - the two read as one row of choices rather than two unrelated controls. */
.es-add{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border-2);color:var(--text);border-radius:20px;padding:8px 16px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2px;}
.es-add iconify-icon{font-size:17px;color:var(--blue);}
.es-add .chev{font-size:15px;color:var(--text-secondary);margin-left:-3px;}
.es-add:hover{border-color:var(--blue);}

.view-area{flex:1;min-height:0;position:relative;}
.classic-view,.lv{display:flex;flex-direction:column;height:100%;}

/* Tooltip / toast / menu (shared) */
.tooltip{position:fixed;z-index:190;max-width:264px;background:var(--paper);border:1px solid var(--border-2);border-radius:10px;padding:9px 10px;box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .13s ease,transform .13s ease;}
.tooltip.show{opacity:1;transform:translateY(0);}
.tt-main{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1.15;padding:4px 10px;border-radius:12px;}
.tt-sub{margin-top:7px;font-size:12px;color:var(--text-secondary);line-height:1.4;padding:0 2px;}
.tt-arrow{position:absolute;width:9px;height:9px;background:var(--paper);border:1px solid var(--border-2);transform:rotate(45deg);}
.tt-arrow.down{bottom:-5px;border-top:none;border-left:none;}
.tt-arrow.up{top:-5px;border-bottom:none;border-right:none;}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(10px);background:var(--paper);border:1px solid var(--border-2);border-radius:10px;padding:11px 16px;font-size:13px;font-weight:500;color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.45);display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:210;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast iconify-icon{font-size:18px;color:var(--green);}
.menu-pop{display:none;position:fixed;min-width:210px;background:var(--paper);border:1px solid var(--border-2);border-radius:10px;padding:6px;z-index:170;box-shadow:0 14px 40px rgba(0,0,0,.5);}
.menu-pop.open{display:block;}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);font-size:13px;padding:9px 10px;border-radius:6px;text-align:left;}
.menu-item iconify-icon{font-size:18px;color:var(--text-secondary);}
.menu-item:hover{background:var(--hover);}
.menu-item.danger{color:var(--red);} .menu-item.danger iconify-icon{color:var(--red);}
.menu-sep{height:1px;background:var(--border);margin:5px 4px;}

/* not-wired flag (prototype marker: needs backend, see PRD) */
.nw-flag{font-size:14px;color:var(--amber);cursor:help;vertical-align:middle;margin-left:5px;}
.bb-auth .nw-flag{color:#fff;opacity:.9;}

/* ============================================================
   v26 - BULK ACTION BAR
   The bar grew from two actions to six, matching the ERP's
   FloatingBulkActionBar. The buttons reuse .sb-btn; only the danger variant,
   the caret and the empty-menu note are new.
   ============================================================ */
.sb-btn .chev{font-size:15px;margin-left:-2px;opacity:.7;}
.sb-btn.danger{color:var(--red);border-color:var(--red-15);}
.sb-btn.danger:hover{border-color:var(--red);background:var(--red-15);}
.sb-btn.danger iconify-icon{color:var(--red);}
/* the delete confirm reuses the unsaved-changes modal shell */
.gm-btn.danger{background:var(--red);border-color:var(--red);color:#fff;}
.gm-btn.danger:hover{filter:brightness(1.05);}
/* a menu with nothing in it says so rather than opening empty */
.sb-none{padding:10px 12px;font-size:12.5px;color:var(--text-secondary);font-style:italic;}

/* ---------- SHARED COMPONENT PRIMITIVES (moved here in v54) ----------
   These eight families were living in work-order-view.classic.css, whose
   header calls it "the Classic view (the control group)". That description
   was wrong: the LEDGER uses all of them too, and the only reason nobody
   noticed is that every page had so far loaded both stylesheets.
   work-order-view-v1.html does not load classic.css, so it rendered with
   invisible checkboxes, colourless fab buttons and an unstyled Activity
   feed until these moved.
   Nothing here changed except the file it lives in. They load EARLIER than
   before (this file is first in the cascade); verified safe - the only later
   rules touching these families are `.cp-row .cbx{flex-shrink}` in
   ledger.css and `.lv-id-sub .labels-chip:hover` in grid.css, both more
   specific and additive.
   .fab-stack stays in classic.css: the floating STACK is Classic-only (and
   is hidden in ledger mode by a rule there), while the .fab BUTTON is shared
   with the ledger's bottom bar. -------------------------------------- */
.client-name{color:var(--blue);text-decoration:underline;font-weight:600;font-size:14px;}
.labels-chip{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--border-2);border-radius:14px;padding:3px 11px;color:var(--text-secondary);font-size:12px;font-weight:500;}
.labels-chip iconify-icon{font-size:15px;}
.act-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:4px;overflow-x:auto;}
.act-tabs::-webkit-scrollbar{height:0;}
.act-tab{padding:9px 12px;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;border:none;border-bottom:2px solid transparent;white-space:nowrap;background:none;}
.act-tab.active{color:var(--blue);border-bottom-color:var(--blue);} .act-tab:hover:not(.active){color:var(--text);}
.feed{max-height:560px;overflow-y:auto;padding:6px 6px 6px 2px;}
.feed::-webkit-scrollbar{width:5px;} .feed::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:3px;}
.feed-item{display:flex;gap:12px;padding:11px 0;}
.feed-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.feed-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);margin-top:5px;}
.feed-line{flex:1;width:2px;background:var(--border);margin-top:4px;}
.feed-item:last-child .feed-line{display:none;}
.feed-body{flex:1;min-width:0;padding-bottom:2px;}
.feed-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.feed-type{font-size:13.5px;font-weight:600;color:var(--text);}
.feed-date{font-size:11.5px;color:var(--text-secondary);white-space:nowrap;}
.feed-desc{font-size:12.5px;color:var(--text-secondary);margin-top:4px;line-height:1.4;}
.feed-more{color:var(--blue);font-size:12px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:5px;justify-content:center;}
.cbx{width:17px;height:17px;border:1.5px solid var(--border-2);border-radius:4px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.cbx.on{background:var(--blue);border-color:var(--blue);color:#fff;} .cbx iconify-icon{font-size:14px;}
.status-pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.status-pill.amber{background:var(--amber-15);color:var(--amber);} .status-pill.green{background:var(--green-15);color:var(--green);} .status-pill.blue{background:var(--blue-16);color:var(--blue);}
.status-pill.sec{background:var(--secondary-15);color:var(--secondary);}
.fab{display:flex;align-items:center;gap:8px;border:none;border-radius:26px;padding:13px 22px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 10px 28px rgba(0,0,0,.35);}
.fab iconify-icon{font-size:18px;}
.fab.green{background:var(--green);color:#fff;} .fab.blue{background:var(--blue);color:#fff;} .fab:hover{filter:brightness(1.06);}