/* =============================================================================================================
   SHARED STYLES FOR THE SECTIONS EDITION
   -------------------------------------------------------------------------------------------------------------
   app.css (next folder up) is the original look and owns every themed colour item. This file adds the pieces the
   sections need: section switcher, scope bar, number tiles, charts, boards, bays, the driver portal, forms.
   Everything uses the theme variables (--teal = accent, --amber, --red, --blue, --surface, --line, --tx, --mu...),
   so saved themes recolour these too. --section is the open section's own colour (from its section.php).
   ============================================================================================================= */

/* ---------- menu top: brand link and section switcher ---------- */
#nav a.brand{text-decoration:none}
.sechead{display:flex;align-items:center;gap:9px;margin:-8px 14px 12px;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--section) 45%,var(--line2));background:color-mix(in srgb,var(--section) 10%,var(--surface));font-weight:700;color:var(--tx)}
.sechead i{width:9px;height:9px;border-radius:50%;background:var(--section);box-shadow:0 0 10px var(--section);flex:none}
.sechead span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sechead svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none;opacity:.7}
.sechead:hover{border-color:var(--section)}
.secmenu{position:fixed;z-index:3000;padding:6px;display:flex;flex-direction:column;gap:2px}
.secmenu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--tx);text-decoration:none;font-weight:600}
.secmenu a:hover{background:color-mix(in srgb,var(--tx) 6%,transparent)}
.secmenu a.on{background:color-mix(in srgb,var(--sc,var(--teal)) 14%,transparent)}
.secmenu a i{width:9px;height:9px;border-radius:50%;background:var(--sc,var(--teal))}
.secmenu a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.secmenu .sm-dash{border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;margin-bottom:4px}
@media (max-width:1180px){.sechead span,.sechead svg{display:none}.sechead{justify-content:center;margin:-6px 10px 10px}}
.ptools h1::before{content:"";display:inline-block;width:4px;height:18px;border-radius:2px;background:var(--section);margin-right:10px;vertical-align:-2px}

/* ---------- scope bar (Overwatch: filters applied to every page) ---------- */
.scopebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--section) 5%,transparent)}
.scopebar b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2)}
.scopebar select,.scopebar input{height:28px;width:auto;max-width:180px}
.scopebar .row{padding:0;gap:8px}

/* ---------- page layouts ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
@media (max-width:1100px){.g2,.g3,.g21{grid-template-columns:1fr}}
.pbody>.card,.g2>.card,.g3>.card,.g21>.card,.stack>.card{margin:0}
.stack{display:flex;flex-direction:column;gap:14px}
.pbody .card .cb{overflow:auto}
.ptools .seg{margin:0}
.toolrow .seg,.ptools .seg{flex:none}
.toolrow .seg button,.ptools .seg button{white-space:nowrap}
.toolrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.toolrow .sp{flex:1}
.toolrow select,.toolrow input{height:30px;width:auto}
.hint{font-size:12px;color:var(--mu);margin:0 0 10px}
.big-num{font:800 28px Manrope;letter-spacing:-.01em}

/* ---------- number tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;min-height:84px}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.kpi.good::before{background:var(--teal)}.kpi.warn::before{background:var(--amber)}.kpi.bad::before{background:var(--red)}.kpi.info::before{background:var(--blue)}
.kpi .kl{font-size:11.5px;color:var(--mu);font-weight:600}
.kpi .kv{font:800 24px Manrope;line-height:1.15;color:var(--tx)}
.kpi.bad .kv{color:var(--red)}.kpi.warn .kv{color:var(--amber)}
.kpi .ks{font-size:11.5px;color:var(--mu2)}
.kpi.link{cursor:pointer;transition:border-color .15s,transform .15s}
.kpi.link:hover{border-color:var(--section);transform:translateY(-1px)}

/* ---------- charts ---------- */
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.bar .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.bar .bt{height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.bar .bt i{display:block;height:100%;border-radius:5px;background:var(--teal)}
.bar.warn .bt i{background:var(--amber)}.bar.bad .bt i{background:var(--red)}.bar.info .bt i{background:var(--blue)}
.bar b{font-weight:700;min-width:48px;text-align:right}
.bar.link{cursor:pointer}.bar.link:hover .bl{text-decoration:underline}
.cols{display:flex;align-items:stretch;gap:4px;padding-bottom:18px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;position:relative;min-width:6px}
.col i{display:block;background:var(--teal);opacity:.85;border-radius:3px 3px 0 0}
.col:hover i{opacity:1}
.col span{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mu2);white-space:nowrap}
.lwrap{position:relative}
.lchart{width:100%;display:block}
.lchart polyline{fill:none;stroke:var(--teal);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lmax,.lmin{position:absolute;right:0;font-size:10px;color:var(--mu2)}.lmax{top:-2px}.lmin{bottom:18px}
.lax{display:flex;justify-content:space-between;font-size:10px;color:var(--mu2);margin-top:4px}

/* ---------- boards (kanban columns of cards) ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px;align-items:start}
.bcol{background:color-mix(in srgb,var(--surface) 70%,var(--bg));border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 290px);min-height:160px}
.bcol>h3{display:flex;align-items:center;gap:8px;font:800 13px Manrope;padding:11px 12px;border-bottom:1px solid var(--line)}
.bcol>h3 .cnt{margin-left:auto;font-size:11px;color:var(--mu);background:var(--line);border-radius:10px;padding:1px 8px}
.bcol>h3 i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--mu))}
.bcol .bl{padding:8px;display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1}
.bcol.drop{outline:2px dashed var(--section);outline-offset:-4px}
.bcard{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;cursor:pointer;transition:border-color .15s}
.bcard:hover{border-color:var(--section)}
.bcard.drop{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 40%,transparent)}
.bcard .t1{display:flex;align-items:center;gap:6px;font-weight:800}
.bcard .t1 small{margin-left:auto;font-weight:600;color:var(--mu);font-size:11px}
.bcard .t2{font-size:12px;color:var(--mu);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard .t3{font-size:11.5px;margin-top:4px}
.bcard.load{border-left:3px solid var(--blue);cursor:grab}
.bcard.load.late{border-left-color:var(--red)}.bcard.load.tight{border-left-color:var(--amber)}
.bcard .acts{margin-top:8px}.bcard .acts button{height:26px;font-size:12px}
.hosbar{height:5px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.hosbar i{display:block;height:100%;background:var(--teal)}
.hosbar.warn i{background:var(--amber)}.hosbar.bad i{background:var(--red)}

/* ---------- notes lists (handoff, coaching) ---------- */
.notes{display:flex;flex-direction:column;gap:8px}
.noteit{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:color-mix(in srgb,var(--surface2) 50%,transparent)}
.noteit.done{opacity:.6}
.noteit p{margin:0 0 4px;white-space:pre-wrap}
.noteit small{color:var(--mu);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.noteit .lnk{padding:0}
textarea{width:100%;min-height:72px;resize:vertical;font:inherit;color:var(--tx);background:var(--e-input-bg);border:1px solid var(--e-input-border);border-radius:var(--rs);padding:8px 10px}
textarea:focus-visible{outline:2px solid var(--e-focus-ring);outline-offset:2px}
.form label{display:block;font-size:12px;color:var(--mu);font-weight:600;margin:8px 0 4px}
.form input,.form select{width:100%}

/* ---------- shop bays ---------- */
.bays{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.bay{border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-height:170px}
.bay h3{display:flex;align-items:center;gap:8px;font:800 14px Manrope}
.bay h3 .chip{margin-left:auto}
.bay.busy{border-color:color-mix(in srgb,var(--amber) 55%,var(--line2))}
.bay.late{border-color:var(--red)}
.bay .truck{font:800 20px Manrope}
.bay .meta{font-size:12px;color:var(--mu)}
.bay .timer{font:700 13px ui-monospace,Consolas,monospace}
.bay.empty-bay{border-style:dashed;background:transparent}
.bay .acts{margin-top:auto}

/* ---------- driver portal ---------- */
.portal{max-width:1100px}
.phead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.phead h2{font:800 24px Manrope}
.phead select{width:auto;min-width:220px;height:34px}
.rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.rings{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ring{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ring svg{width:96px;height:96px}
.ring circle{fill:none;stroke-width:9}
.ring .tr{stroke:var(--line)}
.ring .vl{stroke:var(--teal);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .6s}
.ring.warn .vl{stroke:var(--amber)}.ring.bad .vl{stroke:var(--red)}
.ring text{fill:var(--tx);font:800 15px Manrope;text-anchor:middle;dominant-baseline:central}
.ring span{font-size:12px;color:var(--mu);font-weight:600}
.bigbtn{height:44px;font-size:14px;font-weight:700;padding:0 18px}
.pcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.pcard dt{color:var(--mu)}
.pcard dd{font-weight:600;margin:0}

/* ---------- grades and scores ---------- */
.grade{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font:800 15px Manrope;background:var(--line)}
.grade.A{background:color-mix(in srgb,var(--teal) 22%,transparent);color:var(--teal)}
.grade.B{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
.grade.C{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.grade.D,.grade.F{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.sev{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mu);margin-right:6px}
.sev.bad{background:var(--red);box-shadow:0 0 8px var(--red)}.sev.warn{background:var(--amber)}.sev.info{background:var(--blue)}
td input.inl,td select.inl{height:28px;width:110px}
.money-good{color:var(--teal)}.money-bad{color:var(--red)}
.secgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sectile{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--tx);position:relative;overflow:hidden}
.sectile::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--sc)}
.sectile b{font:800 15px Manrope}.sectile span{font-size:12px;color:var(--mu)}
.sectile:hover{border-color:var(--sc)}
.sectile .st{font-weight:700;font-size:12.5px}

/* =============================================================================================================
   PHONES AND SMALL TABLETS (under 860 px wide): one column. The menu becomes a scrolling strip at the top,
   an open page fills the screen (the map hides), the map's target bar wraps, tables scroll sideways and the
   details drawer slides up from the bottom. This is also the layout the Android app shows (see mobile/README.md).
   ============================================================================================================= */
@media (max-width:860px){
  #nav{position:sticky;top:0;z-index:1200;flex-direction:row;align-items:center;gap:8px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--e-nav-border);background:var(--e-nav-bg-bottom);scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  .sechead{margin:0;flex:none;height:36px;padding:0 12px}.sechead span,.sechead svg{display:inline-block}
  .nav-find{flex:none;width:40px;height:36px;padding:0;justify-content:center;margin:0}.nav-find span,.nav-find kbd{display:none}
  #navlist{display:flex;flex-direction:row;gap:4px;flex:none;padding:0;overflow:visible}
  #navlist .navsec{display:none}
  #navlist button{width:auto;flex:none;height:36px;padding:0 12px;justify-content:flex-start;gap:8px}
  #navlist button span{display:inline;white-space:nowrap}
  .navfoot{display:none}
  body.paged #mapwrap,body.paged #bottom,body.paged #rail{display:none!important}
  #page{min-height:calc(100vh - 54px);border-radius:0;border-left:0;border-right:0;overflow:visible;height:auto}
  body.paged #center{height:auto;overflow:visible}
  #page .pbody,#page .tw{overflow:visible;flex:none}
  #page .tw{overflow-x:auto}
  .ptools{padding:12px;gap:6px}.ptools h1{font-size:18px;width:100%;margin:0 0 4px}.ptools input{width:100%}
  .ptools button{height:32px}
  .pbody{padding:12px}
  .scopebar{padding:8px 12px}.scopebar select,.scopebar input{max-width:none;flex:1 1 45%}
  #mapwrap{height:62vh}
  .searchbar{left:8px;right:8px;width:auto;flex-wrap:wrap;top:8px}
  .searchbar input{flex:1 1 100%;min-width:0}
  .findbtn,.viewbtn{top:auto;bottom:12px}.findbtn{right:auto;left:8px}.viewbtn{right:auto;left:96px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board{grid-auto-columns:minmax(78vw,1fr);scroll-snap-type:x mandatory}.bcol{scroll-snap-align:start;max-height:none}
  #drawer.open{border-radius:16px 16px 0 0}
  body.tablet #navlist button{height:42px}
}
@media (max-width:860px){html,body{height:auto!important;overflow:visible!important}}
@media (max-width:860px){#page td .chip,#page td button{white-space:nowrap}}
#page td .chip,#page td button,#page td a[href^="tel"]{white-space:nowrap}
.portal input,.form input{width:100%}

/* =============================================================================================================
   FIT ANY SCREEN (found by checking every page at 1920, 1366, 1280, 1024, 768 and 390 px wide)
   ============================================================================================================= */
/* wide tables scroll sideways inside their card instead of pushing the page wider than the screen */
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll>table{min-width:100%}
/* grid and flex children may shrink below their content's width (otherwise one wide table stretches the whole column) */
.g2>*,.g3>*,.g21>*,.stack>*,.card,.cb,.bays>*,.kpis>*{min-width:0}
.card .cb{overflow-x:auto}
/* card headers wrap their buttons onto a second line when space runs out */
.card>.ch{flex-wrap:wrap;row-gap:6px}
.card>.ch .seg{flex:none;max-width:100%;overflow-x:auto}
.toolrow{min-width:0}.toolrow .seg{max-width:100%;overflow-x:auto}
/* long words, addresses and ids never force a column wider than the screen */
#page td,.bcard,.noteit,.li,.bay{overflow-wrap:break-word}
#page td small{overflow-wrap:anywhere}
/* tablets: the bottom panels get too narrow for the legend; it is also on the map's filter panel */
@media (max-width:1440px){#bottom [data-panel="leg"]{display:none!important}}
/* tablets in portrait: two KPI columns minimum, cards stack */
@media (max-width:1024px){.kpis{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.bays{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media (max-width:860px){
  #page .pbody{overflow-x:hidden}
  .kpi{min-height:74px;padding:10px 12px}.kpi .kv{font-size:20px}
  .ptools .seg{max-width:100%;overflow-x:auto}
  .card>.ch{padding-right:10px}
}
/* The working screen is exactly one window tall: long section menus scroll inside the menu instead of
   pushing the map, panels and buttons below the bottom of the screen (768-pixel-tall laptops). */
@media (min-width:861px){
  #app{height:100vh;height:100dvh;grid-template-rows:minmax(0,1fr)}
  #nav{min-height:0;overflow:hidden}
  #navlist{flex:1 1 auto;min-height:0;overflow-y:auto}
  .navfoot{flex:none;padding-top:8px}
  #rail,#drawer{max-height:100vh;max-height:100dvh}
}
/* short screens: tighter menu and smaller status box so more menu items fit */
@media (min-width:861px) and (max-height:820px){
  #navlist button{height:32px}.navsec{padding:10px 12px 2px}.brand{padding-bottom:14px}
  .sys{gap:4px;padding:8px 10px;font-size:11.5px}
}
/* tablets (861-1180 px): map toolbar on two rows so the target search never runs under Find and View */
@media (min-width:861px) and (max-width:1180px){
  .searchbar{right:12px;width:auto}
  .findbtn,.viewbtn{top:64px}
  .sechead{width:40px;height:34px;padding:0;margin:-6px auto 10px}
  .sechead i{width:12px;height:12px}
}

/* portrait tablets: three-across groups become two-across instead of one long column */
@media (min-width:600px) and (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.findbtn,.viewbtn{bottom:30px}}

/* Themes panel: one-click full looks */
.th-looks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 14px 2px}
.th-looks span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2);grid-column:1/-1}
.th-looks button{height:28px;padding:0 6px;font-size:12px;min-width:0}
.th-looks button.on{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}

/* ---- Themes panel: personal vs company theme ---- */
.th-using{margin:8px 14px 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);display:flex;flex-direction:column;gap:1px;font-size:12px}
.th-using b{font-size:12.5px}.th-using span{color:var(--mu)}
.th-using.own{border-color:color-mix(in srgb,var(--teal) 55%,transparent)}.th-using.own b{color:var(--teal)}
.th-admin{margin:8px 14px 0;padding:8px 10px;border:1px dashed var(--line2);border-radius:8px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.th-admin summary{cursor:pointer;color:var(--mu);font-weight:600}
#th-plist{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:160px;overflow:auto}
.th-prow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.th-prow span{color:var(--mu);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-prow button{height:24px;padding:0 8px;font-size:11.5px}
.th-foot{flex-wrap:wrap}.th-foot .th-note{flex-basis:100%}

/* ---- Charts (library/charts.js) ---- */
.chart{position:relative;min-width:0;width:100%}
.chart svg{display:block;max-width:100%;overflow:visible}
.chart .ch-grid{stroke:var(--line);stroke-width:1}
.chart .ch-base{stroke:var(--line2);stroke-width:1}
.chart .ch-ax{fill:var(--mu);font-size:11px;font-family:inherit}
.chart .ch-ytitle{fill:var(--mu2);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.chart .ch-lab{fill:var(--tx);font-size:12px}
.chart .ch-val{fill:var(--mu);font-size:11px;font-variant-numeric:tabular-nums}
.chart .ch-ref{stroke:var(--tx);stroke-width:1.5;stroke-dasharray:5 4;opacity:.65}
.chart .ch-cross{stroke:var(--mu2);stroke-width:1}
.chart .ch-hit{fill:transparent;cursor:default}
.chart .ch-hit.on{fill:color-mix(in srgb,var(--tx) 6%,transparent)}
.chart svg.clickable .ch-hit{cursor:pointer}
.chart .ch-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;font-size:12px;color:var(--mu)}
.chart .ch-leg span{display:inline-flex;align-items:center;gap:6px}
.chart .ch-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart .ch-leg i.ref{height:0;border-top:2px dashed var(--tx);border-radius:0;width:16px;opacity:.7}
.chart .ch-tip{position:absolute;z-index:20;pointer-events:none;min-width:170px;max-width:300px;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.chart .ch-tip b{display:block;margin-bottom:4px;color:var(--tx)}
.chart .ch-tip div{display:flex;align-items:center;gap:6px;color:var(--mu);line-height:1.6}
.chart .ch-tip div i{width:9px;height:9px;border-radius:2px;flex:none}
.chart .ch-tip div span{margin-left:auto;padding-left:12px;color:var(--tx);font-variant-numeric:tabular-nums}
.chart .ch-tip .tot{border-top:1px solid var(--line);margin-top:3px;padding-top:3px;font-weight:700}
.chart .ch-foot{display:flex;justify-content:flex-end}
.chart .ch-tbtn{height:22px;padding:0 8px;font-size:11px;background:transparent;border-color:transparent;color:var(--mu)}
.chart .ch-tbtn:hover{color:var(--tx);border-color:var(--line2)}
.chart .ch-table{margin-top:6px;max-height:320px;overflow:auto}
.chart .ch-empty{padding:28px 0;text-align:center}

/* ---- Finance analysis pages (library/analysis.js) ---- */
.fa{display:flex;flex-direction:column;gap:14px;min-width:0}
.fa>#fa-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.fa .card{margin:0}
.fa .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.fa .g2{grid-template-columns:minmax(0,1fr)}}
.fa-adj .cb{padding-top:10px}
.fa-adj{position:relative}
.fa-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-start;padding:10px 14px}
.fa-f{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:340px}
.fa-f>label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mu2)}
.fa-f .note{margin:2px 0 0;font-size:11.5px;max-width:300px}
.fa-f select,.fa-f input[type=number],.fa-f input[type=month]{height:32px}
.fa-f input[type=number]{width:110px}
.fa-pair{display:flex;gap:6px;flex-wrap:wrap}
.fa-sl{display:flex;align-items:center;gap:10px}
.fa-sl input[type=range]{width:170px;accent-color:var(--teal)}
.fa-sl b{min-width:58px;font-variant-numeric:tabular-nums}
.fa-reset{align-self:center}
.fa-scales{border-top:1px solid var(--line)}
.fa-scales>summary{cursor:pointer;padding:10px 14px;font-weight:700;list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fa-scales>summary::-webkit-details-marker{display:none}
.fa-scales>summary::before{content:'▸';color:var(--mu)}.fa-scales[open]>summary::before{content:'▾'}
.fa-scales>summary .note{font-weight:400;margin:0}
.fa-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 50%,transparent)}
.fa-adjnote{margin:0}
.fa-stat{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px}
.fa-stat .note{margin:0}
.fa-msgs{flex-basis:100%;display:flex;flex-direction:column;gap:3px}
.fa-msgs .bad{color:var(--red)}.fa-msgs .warn{color:var(--amber)}
.fa-chart{min-height:120px}
.fa-cnote{margin:8px 0 0;font-size:11.5px}
.fa-tabrow{margin:0;flex-wrap:wrap}
.fa-tabrow .seg{flex-wrap:wrap}
#fa-m,#fa-f{display:flex;flex-direction:column;gap:14px;min-width:0}
.fa-h4{margin:14px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.fa-detail{border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.fa td small,.fa-wot td small{display:block;color:var(--mu2);font-size:11px}
.fa-wor{cursor:pointer}.fa-wor:hover td{background:color-mix(in srgb,var(--tx) 4%,transparent)}
.fa-wod>td{background:var(--surface2)}
.fa-lines{display:flex;flex-direction:column;gap:10px;padding:6px 0}
.fa-lih{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.fa-lih span{color:var(--mu);font-size:12px}
.fa-sub{font-size:12px}.fa-sub th,.fa-sub td{padding:4px 6px}
@media (max-width:860px){.fa-row{padding:8px 10px;gap:10px}.fa-f{max-width:100%}.fa-sl input[type=range]{width:140px}}

/* ---- Shop dashboard, recommended services, inspections, live engine data (library/shopdash.js) ---- */
.sd{display:flex;flex-direction:column;gap:14px;min-width:0}
.sd .card{margin:0}
.sd-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sd-g21{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.sd-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1280px){.sd-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1050px){.sd-g,.sd-g21,.sd-g3{grid-template-columns:minmax(0,1fr)}}
.sd-intro{margin:0;max-width:1100px}
.sd-list{display:flex;flex-direction:column;gap:2px}
.sd-item{display:grid;grid-template-columns:minmax(70px,auto) minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:8px 10px;border-radius:8px;border-left:3px solid var(--amber);background:color-mix(in srgb,var(--surface2) 70%,transparent)}
.sd-item.bad{border-left-color:var(--red)}
.sd-item .sd-veh{font-weight:800;font-size:13.5px}
.sd-why{display:flex;flex-direction:column;gap:2px;font-size:12.5px;min-width:0}
.sd-why small,.sd-row small{color:var(--mu2);margin-left:4px}
.sd-where{color:var(--mu);white-space:nowrap}
.sd-row{display:grid;grid-template-columns:12px minmax(56px,auto) minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.sd-row:last-child{border-bottom:0}
.sd-row span:nth-child(3){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu)}
.sd-row b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sev.green{background:var(--teal)}
.sd-ins{display:inline-block;margin:1px 3px 1px 0;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid var(--line2)}
.sd-ins.ok{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 50%,transparent);background:color-mix(in srgb,var(--teal) 10%,transparent)}
.sd-ins.fixed{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.sd-ins.bad{color:var(--red);border-color:color-mix(in srgb,var(--red) 55%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent)}
.sd-ins.none{color:var(--mu2);border-style:dashed}
.sd-cov td,.sd-cov th{text-align:center;padding:5px 4px;white-space:nowrap}
.sd-cov td:first-child,.sd-cov th:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
.sd-alert{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
.dv-click{cursor:pointer}.dv-click:hover td{background:color-mix(in srgb,var(--tx) 4%,transparent)}
.dv-det>td{background:var(--surface2)}
.dv-def{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px}
.sd td small{display:block;color:var(--mu2);font-size:11px}
.sd td div.bad{color:var(--red)}.sd td div.warn{color:var(--amber)}
.sc-t input{width:100%;min-width:70px;height:30px}
.sc-t td:first-child input{min-width:200px}.sc-t td:nth-child(5) input{min-width:220px}
@media (max-width:700px){.sd-item{grid-template-columns:minmax(0,1fr)}.sd-item .sd-veh{order:-2;justify-self:start}.sd-item .sd-where{order:-1;white-space:normal}.sd-row{grid-template-columns:12px auto minmax(0,1fr)}.sd-row b{grid-column:3}}

/* ---- Branding: logo and the "Created by" credit (lib/bootstrap.php credit_html) ---- */
.credit{font-size:11px;line-height:1.4;color:var(--mu2);text-align:center}
.credit b{color:var(--mu);font-weight:700}.credit a{color:var(--mu2);text-decoration:none}.credit a:hover{color:var(--teal);text-decoration:underline}
.credit-nav{margin-top:8px;padding:0 4px;overflow-wrap:anywhere}
.credit-float{display:none}
@media (max-width:1180px) and (min-width:861px){.credit-nav{display:none}
  .credit-float{display:block;position:fixed;left:50%;bottom:4px;transform:translateX(-50%);z-index:30;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);font-size:10.5px;white-space:nowrap}}
@media (max-width:860px){.credit-nav{display:none}.credit-float{display:block;padding:14px 16px 22px}}
.th-maprow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px 14px 0}
.th-maprow label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2)}
.th-maprow select{height:30px}.th-maprow .note{grid-column:1/-1;margin:0;font-size:11px}

/* ---- Messages panel (core/chat.js) ---- */
.chat-navbtn{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px;position:relative}
.chat-navbtn svg,.chat-fab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.chat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800}
.chat-badge[hidden]{display:none!important}
.chat-fab{display:none;position:fixed;right:16px;bottom:56px;z-index:1250;width:52px;height:52px;border-radius:50%;padding:0;align-items:center;justify-content:center;background:var(--teal);color:var(--on-accent);border:0;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.chat-fab svg{width:22px;height:22px}.chat-fab .chat-badge{position:absolute;top:-2px;right:-2px}
@media (max-width:1180px){.chat-fab{display:flex}.chat-navbtn{display:none}}
.chat{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;z-index:1300;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line2);box-shadow:-12px 0 40px rgba(0,0,0,.45)}
.chat[hidden]{display:none}
.chat-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-h h3{margin:0;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ht{flex:1;min-width:0}.chat-ht h3{flex:none}.chat-ht small{color:var(--mu);font-size:11.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-x{font-size:20px;line-height:1;width:32px;height:32px;padding:0}
.chat-s{padding:10px 14px 4px}.chat-s input{width:100%}
.chat-list{flex:1;overflow-y:auto;padding:4px 8px}
.chat-c{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;height:auto;padding:9px 8px;border:0;border-radius:8px;background:transparent}
.chat-c:hover{background:var(--surface2)}
.chat-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--teal);font-weight:800;font-size:13px}
.chat-ic.k-dm{color:var(--mu);font-size:10px}
.chat-ct{min-width:0;display:flex;flex-direction:column}.chat-ct b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ct small{color:var(--mu);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-c.un .chat-ct b{color:var(--tx)}.chat-c.un .chat-ct small{color:var(--tx)}
.chat-cm{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--mu2);white-space:nowrap}
.chat-cm i{font-style:normal;min-width:18px;height:18px;border-radius:999px;background:var(--teal);color:var(--on-accent);font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-foot{margin:0;padding:8px 14px;border-top:1px solid var(--line);font-size:11px}
.chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.chat-older{align-self:center;font-size:12px}
.chat-day{align-self:center;font-size:11px;color:var(--mu2);padding:4px 10px;border-radius:999px;background:var(--surface2)}
.chat-m{max-width:82%;align-self:flex-start;background:var(--surface2);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:7px 10px}
.chat-m.me{align-self:flex-end;background:color-mix(in srgb,var(--teal) 18%,var(--surface2));border-color:color-mix(in srgb,var(--teal) 40%,var(--line));border-radius:12px 12px 4px 12px}
.chat-m b{display:block;font-size:12px;color:var(--teal)}.chat-m b small{color:var(--mu2);font-weight:600}
.chat-m p{margin:2px 0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.chat-m>small{display:block;text-align:right;font-size:10.5px;color:var(--mu2)}
.chat-comp{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);align-items:flex-end}
.chat-comp textarea{flex:1;resize:none;min-height:42px;max-height:140px;font:inherit}
.chat-comp button{height:42px}
.chat-people{flex:1;overflow-y:auto;padding:4px 14px}
.chat-role{display:flex;justify-content:space-between;align-items:center;margin:10px 0 4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2)}
.chat-p{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 4px;border-radius:6px;cursor:pointer}
.chat-p:hover{background:var(--surface2)}.chat-p small{color:var(--mu2);font-size:11px}
.chat-newf{border-top:1px solid var(--line)}.chat-newf>input{margin:10px 14px 0;width:calc(100% - 28px)}
@media (max-width:860px){.chat{width:100vw;border-left:0}.chat-fab{bottom:16px}}

/* ---- Route planner (library/routeplan.js) ---- */
.rp{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:14px;padding:14px 18px;align-items:start}
@media (max-width:980px){.rp{grid-template-columns:minmax(0,1fr);padding:10px}}
.rp .card{margin:0}
.rp-form label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mu2);margin:12px 0 5px}
.rp-form input,.rp-form select{width:100%}
.rp-form .seg{flex-wrap:wrap}
.rp-form label.rp-chk{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--tx);font-weight:500}
.rp-form label.rp-chk input{width:auto}
.rp-stop{display:grid;grid-template-columns:22px minmax(0,1fr) 34px 34px;gap:6px;align-items:center;margin-bottom:6px}
.rp-stop span{width:22px;height:22px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.rp-stop button{padding:0;height:34px}
#rp-add{margin-top:2px}
.rp-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.rp-map{height:min(52vh,460px);min-height:280px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.rp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.rp-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;height:auto!important;min-height:0!important;white-space:normal;padding:12px;text-align:left;border:1px solid var(--line2);border-left:4px solid var(--c);border-radius:10px;background:var(--surface)}
.rp-opt.on{background:color-mix(in srgb,var(--c) 14%,var(--surface));border-color:var(--c)}
.rp-opt .rp-big{font-size:20px;font-weight:800}
.rp-opt span{font-size:12.5px;color:var(--mu)}.rp-opt span.bad{color:var(--red)}.rp-opt span.warn{color:var(--amber)}.rp-opt span.good{color:var(--teal)}
.rp-cur{padding:10px 12px;border:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));border-radius:10px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.rp-legs{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--mu);margin:6px 0}
.rp-steps{margin:0;padding-left:22px;max-height:420px;overflow:auto}
.rp-steps li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.rp-steps li small{color:var(--mu2);white-space:nowrap}
.rp-pin span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#000;font:800 12px Manrope,sans-serif;box-shadow:0 0 0 3px #000,0 2px 8px rgba(0,0,0,.6)}
.rp-inc span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#111;border:1px solid #ffb02e;font-size:14px}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rp-inc-r{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.rp-inc-r small{display:block;color:var(--mu);font-size:12px}.rp-ii{font-size:18px}.rp-at{color:var(--mu2);font-size:12px;white-space:nowrap}
.rp-road{gap:14px}
a.btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--surface2);color:var(--tx);text-decoration:none;font-weight:600}
.rp-trk span{display:inline-block;white-space:nowrap;padding:2px 6px;border-radius:6px;font:700 10.5px Manrope,sans-serif;color:#dfe;background:rgba(10,18,23,.9);border:1px solid var(--line2);cursor:pointer}
.rp-trk.on span{color:var(--on-accent);background:var(--teal);border-color:var(--teal);font-size:12px;box-shadow:0 0 0 2px #000,0 0 14px var(--teal)}
.rp-opt span.rp-big{color:var(--tx)}

/* ---------- Contacts (library/fleet.js): admin editing ---------- */
.ct-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.ct-chk input{width:auto;height:auto}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px}
.ct-grid label{display:flex;flex-direction:column;gap:4px;min-width:0}
.ct-grid label span{font-size:11px;color:var(--mu)}
.ct-grid input,.ct-grid textarea{width:100%}
.ct-grid .ct-wide{grid-column:1/-1}
.ct-opts{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 4px}
.ct-card .acts .sp{flex:1}
.ct-card .acts .bad{color:var(--red)}
.ct-acts{display:inline-flex;gap:6px;white-space:nowrap}
#ct-t td small{display:block;color:var(--mu2);font-size:11px;margin-top:3px}
.chip.info{background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue)}
.toast.green{border-left-color:var(--teal)}

/* ---------- Sounds on/off button in the menu (core/uisound.js) ---------- */
.snd-navbtn{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px}
.snd-navbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.snd-navbtn.on{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 55%,transparent)}

/* ---------- map snapshot viewer (Snapshot.open in core/ui.js) ---------- */
.snap{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.snap-card{background:var(--surface,#0a1217);border:1px solid var(--line2,#1f3340);border-radius:12px;box-shadow:var(--shadow);width:min(960px,100%);max-height:100%;overflow:auto;padding:14px}
.snap-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.snap-card header .sp{flex:1}
.snap-img{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:900/560;display:flex;align-items:center;justify-content:center}
.snap-img img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.snap-st{margin:8px 0 0;font-size:11px}.snap-st.bad{color:var(--red)}
.snapbtn{display:inline-flex;align-items:center;gap:6px}

/* ---------- Config files box (core/cfgfile.js) ---------- */
.cfbox{margin-top:16px;padding-top:12px;border-top:1px solid var(--cf-line,rgba(128,160,170,.25))}
.cf-h{margin:0 0 4px;font-size:13px;letter-spacing:.04em}.cf-note{margin:0 0 8px;font-size:12px;opacity:.75}
.cf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--cf-line,rgba(128,160,170,.25))}
.cf-t b{display:block;font-size:13px}.cf-t small{font-size:11px;opacity:.7}
.cf-b{display:flex;gap:6px;flex-wrap:wrap}
.cf-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--cf-line2,rgba(128,160,170,.45));font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;color:inherit;background:transparent}
.cf-btn:hover{border-color:currentColor}.cf-up{background:rgba(98,241,14,.12)}
.cf-keep{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:12px;cursor:pointer}.cf-keep input{width:auto;height:auto;margin:0}
.cf-msg{font-size:12px;margin:6px 0 0;min-height:1em}.cf-msg.ok{color:#62f10e}.cf-msg.bad{color:#ff5d52}.cf-warn{color:#f6b93b}.cf-reload{margin-left:4px}
#dlg .cf-b .cf-btn,.cfbox .cf-b label.cf-btn{margin:0;display:inline-flex;align-items:center;height:30px;line-height:1}
/* a trailer hooked to a truck (follows it on the map; lib/merge.php link_trailers) */
.trl.hk{border-style:dashed}
.sechead.locked{cursor:default}.sechead.locked:hover{border-color:var(--line2,#1f3340)}

/* ---------- Sign out page (core/pages.js PAGES.signout) ---------- */
.so-wrap{display:flex;justify-content:center;padding:40px 16px}
.so-card{width:min(440px,100%);background:var(--surface,#0a1217);border:1px solid var(--line2,#1f3340);border-radius:14px;padding:28px;text-align:center;box-shadow:var(--shadow)}
.so-card h2{margin:10px 0 8px;font-size:19px}.so-card p{margin:6px 0;color:var(--mu)}.so-card p b{color:var(--tx)}
.so-ic{width:52px;height:52px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--section,var(--teal)) 14%,transparent)}
.so-ic svg{width:24px;height:24px;fill:none;stroke:var(--section,var(--teal));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.so-acts{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}.so-acts button{min-width:140px;height:38px}