:root { --bg:#eef1f5; --topbg:#16294d; --panel:#ffffff; --line:#d7dfe9; --txt:#16233a; --muted:#5d6f88; --acc:#1668dc; --acc-d:#0f4fb3; --ok:#1e9e56; --danger:#d92d20; --inputbg:#f4f6fa; --flashbg:#d7f2e1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.top { background:var(--topbg); border-bottom:1px solid var(--topbg); padding:.6rem .9rem; position:sticky; top:0; z-index:10; }
.top .brand { color:#fff; }
.top .navlink { color:#c3cfe4; }
.top .navlink.on, .top .navlink:hover { background:rgba(255,255,255,.14); color:#fff; }
.brand { font-weight:800; letter-spacing:.3px; margin-bottom:.4rem; }
nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.navlink { color:var(--muted); text-decoration:none; padding:.35rem .7rem; border-radius:.5rem; font-size:.9rem; }
.navlink.on, .navlink:hover { background:var(--panel); color:var(--txt); }
.wrap { max-width:960px; margin:0 auto; padding:1rem .9rem 3rem; }
h1 { font-size:1.35rem; margin:.4rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--acc); }
h3 { font-size:.95rem; margin:.2rem 0 .6rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; }
.r { text-align:right; } .mono { font-family:ui-monospace,monospace; font-size:.82rem; word-break:break-all; }
.muted { color:var(--muted); } .hint { color:var(--muted); font-size:.82rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; }
.card .big { font-size:1.6rem; font-weight:800; } .card .lbl { color:var(--muted); font-size:.82rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; margin-bottom:.9rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:640px){ .grid2{ grid-template-columns:1fr; } }
.form label { display:block; margin:.55rem 0; font-size:.9rem; }
.form input, .form select, .form textarea { width:100%; margin-top:.25rem; padding:.55rem .6rem; border-radius:.5rem; border:1px solid var(--line); background:var(--inputbg); color:var(--txt); font-size:1rem; }
.form .chk input { width:auto; margin-right:.4rem; }
.btn { display:inline-block; background:#4a6fa5; color:#fff; border:1px solid #3a5a87; padding:.55rem .9rem; border-radius:.55rem; text-decoration:none; font-size:.92rem; cursor:pointer; font-weight:600; }
.btn.primary { background:var(--acc); border-color:var(--acc-d); color:#fff; font-weight:700; }
.btn.green { background:var(--ok); border-color:#157a41; color:#fff; font-weight:700; }
.btn.amber { background:#c07f13; border-color:#96650f; color:#fff; font-weight:700; }
.btn.yellow { background:#f5c518; border-color:#c9a227; color:#16233a; font-weight:700; }
.row2 { display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0; }
.linkbtn { background:none; border:none; color:var(--acc); cursor:pointer; font-size:.9rem; padding:.2rem; }
.linkbtn.danger { color:var(--danger); }
.badge { display:inline-block; padding:.18rem .6rem; border-radius:1rem; font-size:.78rem; font-weight:700; background:#e3e7ee; color:#3c4657; }
.st-draft { background:#e3e7ee; color:#3c4657; } .st-estimate { background:#d2f0dc; color:#1c6b3f; } .st-approved { background:#d9e8fd; color:#1d4f9c; }
.st-in_progress { background:#f7e9c4; color:#8a5f00; } .st-dispatched { background:#e0e7ff; color:#3730a3; } .st-complete { background:#d2f0dc; color:#1c6b3f; }
.st-invoiced { background:#e9dcf7; color:#5b3a78; } .st-paid { background:#d2f0dc; color:#1c6b3f; } .st-cancelled { background:#f9d8d5; color:#a02328; }
.totals { max-width:420px; margin-left:auto; } .totals .grand td { font-weight:800; font-size:1.1rem; border-top:2px solid var(--acc); }
.internal { color:var(--muted); }
.foot { text-align:center; color:var(--muted); font-size:.78rem; padding:1.2rem; border-top:1px solid var(--line); }

/* Sidebar navigation layout (per-user display option) */
body.sidenav { display:flex; align-items:stretch; }
body.sidenav .top { position:sticky; top:0; height:100vh; width:228px; flex:0 0 228px; display:flex; flex-direction:column; overflow-y:auto; }
body.sidenav .top nav { flex-direction:column; align-items:stretch; margin-top:.5rem; flex:1; }
body.sidenav .top .navlink { display:block; padding:.55rem .75rem; }
body.sidenav .uchip { margin:auto 0 0; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.15); align-self:stretch; }
body.sidenav .uchip .who { white-space:nowrap; font-weight:600; }
body.sidenav .uchip .who .navlink { display:inline; padding:0; }
body.sidenav .sidewrap { flex:1; min-width:0; }
body.sidenav .brand { flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
body.sidenav .brandsub { font-size:.72rem; letter-spacing:1.2px; }
@media (max-width:760px) {
  body.sidenav { display:block; }
  body.sidenav .top { width:auto; height:auto; }
  body.sidenav .top nav { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body.sidenav .top nav::-webkit-scrollbar { display:none; }
  body.sidenav .top .navlink { flex:none; white-space:nowrap; }
  body.sidenav .uchip { margin-left:auto; border-top:none; padding-top:0; }
  body.sidenav .brand { flex-direction:row; align-items:center; }
}

/* Phase 2: auth & user management */
.err { background:#f9d8d5; border:1px solid var(--danger); border-radius:.5rem; padding:.7rem .9rem; }
.flash { background:var(--flashbg); border:1px solid var(--ok); border-radius:.5rem; padding:.7rem .9rem; }
/* Role-toggle banner: shown on every page while an owner is viewing as technician. */
.rolebanner { background:#b45309; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.rolebanner .btn { background:#fff; color:#7c3a06; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
/* Trial-nudge banner: solo mode, shown to the owner at 30 days in, 15 days out, then daily from 7 days out. */
.trialbanner { background:#1d4ed8; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.trialbanner a { color:#fff; font-weight:700; }
.trialbanner .btn { background:#fff; color:#1e40af; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
.trialbanner .trialwarn { font-weight:700; text-decoration:underline; }
.uchip { margin-left:auto; color:var(--muted); font-size:.82rem; align-self:center; }
.uchip .navlink { display:inline; padding:.2rem .4rem; }
.inlineform { display:inline; }
.nowrap { white-space:nowrap; }
.terms { max-height:220px; overflow:auto; background:var(--inputbg); border:1px solid var(--line); border-radius:.5rem; padding:.7rem; font-size:.85rem; white-space:pre-wrap; }
.bigpass { font-size:1.3rem; font-weight:800; letter-spacing:1px; background:var(--inputbg); padding:.7rem; border-radius:.5rem; border:1px dashed var(--acc); }
.mono.small { font-size:.72rem; }
.vmodal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
.vmodal[hidden] { display:none; }
tr.voided td { opacity:.55; text-decoration:line-through; }
tr.voided td:last-child { text-decoration:none; }
.vmodal-box { max-width:440px; width:100%; }
.vmodal-box video { width:100%; border-radius:8px; background:#000; min-height:220px; }
.mgallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:1rem; }
.mitem { margin:0; }
.mitem img, .mitem video { width:100%; height:140px; object-fit:cover; border-radius:8px; background:#111; display:block; }
.mitem figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.ainote { border-left:3px solid var(--acc); padding:.4rem .7rem; margin:.6rem 0; background:rgba(255,255,255,.02); border-radius:0 .5rem .5rem 0; }
.ainote p { margin:.25rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brandlogo { height:42px; width:auto; }
.brandsub { font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:.82rem; color:#c8d0e0; white-space:nowrap; }
/* Logo doubles as the owner role-switcher: a button reset to look like the old home link. */
.logobtn { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.loginbrand { text-align:center; margin:1.4rem 0 .8rem; }
.loginlogo { height:72px; width:auto; }
.logintitle { margin-top:.55rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; font-size:.95rem; color:var(--txt); }

/* Owner inspection form (mobile-first) */
.seg{display:flex;gap:.4rem;margin:.4rem 0}
.segbtn{flex:1;min-width:0;padding:.75rem .2rem;font-size:.85rem;font-weight:700;border-radius:.6rem;border:2px solid var(--line);background:var(--inputbg);color:var(--txt);cursor:pointer}
.segbtn.on-good{background:#1f6b43;border-color:#1f6b43;color:#fff}
.segbtn.on-attention{background:#7a5b12;border-color:#7a5b12;color:#fff}
.segbtn.on-urgent{background:#5a2326;border-color:#e05252;color:#fff}
.segbtn.on-na{background:#3a3f4d;border-color:#3a3f4d;color:#fff}
.prog{height:10px;background:var(--inputbg);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:.3rem 0 .6rem}
.prog>i{display:block;height:100%;background:var(--acc);transition:width .2s}
.insp-item{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;margin:.5rem 0}
.insp-item.flagged-attention{border-color:#7a5b12}
.insp-item.flagged-urgent{border-color:#e05252}
.notelbl{display:block;margin:.4rem 0;font-size:.85rem;color:var(--muted)}
.notelbl input{width:100%;margin-top:.2rem;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--inputbg);color:var(--txt);font-size:.95rem;box-sizing:border-box}
.thumbrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}
.thumbrow img,.thumbwrap img{width:90px;height:70px;object-fit:cover;border-radius:6px}
.testbox{border:1px solid var(--line);border-radius:.6rem;padding:.7rem .8rem;margin:.6rem 0;background:var(--inputbg)}
.testbox h4{margin:.1rem 0 .5rem}
.testres{margin:.4rem 0}
.trow{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.trow span{color:var(--muted)}
.qrrow{display:flex;gap:.9rem;align-items:flex-start;margin:.6rem 0}
.qrimg{width:150px;height:150px;border:1px solid var(--line);border-radius:.4rem;background:#fff;flex:none}
.mono{font-family:ui-monospace,monospace;font-size:.82rem;word-break:break-all}
.docrow{padding:.3rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.checkline{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .6rem;border:1px solid var(--line);border-radius:.5rem;margin:.45rem 0;cursor:pointer}
.checkline input{margin-top:.2rem;transform:scale(1.25);flex:none}
.msglog{margin:.6rem 0}
.msgline{padding:.55rem .7rem;border-radius:.6rem;margin:.4rem 0;font-size:.93rem;line-height:1.45}
.msg-out{background:#d9e8fd;border:1px solid var(--acc)}
.msg-in{background:#d2f0dc;border:1px solid var(--ok)}
.pwWrap{position:relative;display:block}
.pwWrap input{padding-right:2.6rem}
.pwEye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.15rem;line-height:1;cursor:pointer;padding:.25rem}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;max-width:440px;width:100%;padding:1.25rem;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal h3{font-size:1.1rem}
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; font-weight:700; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- Phone layout: the app must read cleanly in the installed PWA, not just on desktop. ---- */
@media (max-width:640px) {
  .wrap { padding:.8rem .6rem 3rem; }
  h1 { font-size:1.15rem; margin:.2rem 0 .8rem; }
  /* Data tables: scroll sideways instead of crushing columns. */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th, td { white-space:nowrap; }
  /* Top nav: one sideways-scrollable strip instead of a wrapping wall of links. */
  .top { padding:.5rem .6rem; }
  .top nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .top nav::-webkit-scrollbar { display:none; }
  .top .navlink, .uchip { flex:none; white-space:nowrap; }
  .brandlogo { height:32px; }
  .brandsub { font-size:.7rem; letter-spacing:1.5px; }
  /* Bigger tap targets, tighter panels. */
  .btn { padding:.65rem 1rem; }
  .panel { padding:.75rem; }
  .card { padding:.7rem; }
  .card .big { font-size:1.35rem; }
  .row2 { margin:.6rem 0; }
  .totals { max-width:none; }
}

/* Navigation editor (profile): reorder rows with up/down, show/hide, favorites */
.navrow { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--line); }
.navrow:last-child { border-bottom:none; }
.navmove { display:flex; flex-direction:column; gap:2px; }
.navmove .linkbtn { padding:.05rem .35rem; line-height:1.2; }
.navshow { flex:1; display:flex; align-items:center; gap:.5rem; margin:0; }
.navfav { display:flex; align-items:center; gap:.3rem; margin:0; white-space:nowrap; }

/* Dashboard stat cards that link into their data */
a.card.cardlink { text-decoration:none; color:inherit; display:block; }
a.card.cardlink:hover { border-color:var(--acc); }
a.card.cardlink:hover .lbl { color:var(--acc); }

/* R.O. detail tab strip */
.rotabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:.55rem 0 .2rem; }
.rotabs a { padding:.32rem .75rem; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; font-size:.9rem; color:inherit; background:var(--panel); }
.rotabs a:hover { border-color:var(--acc); color:var(--acc); }
/* R.O. tab strip colors — Justin's model: yellow = pending action,
   green = build/go, blue = info/utility, red = destructive. */
.rotabs a.rotab-yellow { background:#f5c518; border-color:#c9a227; color:#16233a; font-weight:700; }
.rotabs a.rotab-yellow:hover { background:#eab308; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-yellow.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-green { background:#d2f0dc; border-color:#1e9e56; color:#145c33; font-weight:700; }
.rotabs a.rotab-green:hover { background:#bfe8cf; border-color:#157a41; color:#0f4d2a; }
.rotabs a.rotab-green.active { background:#1e9e56; border-color:#157a41; color:#fff; }
.rotabs a.rotab-blue { background:#e0ebfa; border-color:#1668dc; color:#0f4fb3; font-weight:700; }
.rotabs a.rotab-blue:hover { background:#cfdef7; border-color:#0f4fb3; color:#0c3f8f; }
.rotabs a.rotab-blue.active { background:#1668dc; border-color:#0f4fb3; color:#fff; }
.rotabs a.rotab-red { background:#fdeceb; border-color:#d92d20; color:#b91c1c; font-weight:700; }
.rotabs a.rotab-red:hover { background:#fbd9d7; border-color:#b91c1c; color:#a01616; }
.rotabs a.rotab-red.active { background:#d92d20; border-color:#b91c1c; color:#fff; }

/* Dashboard sections: press and hold (mouse or touch) to move, no grips */
.dashsec { position:relative; }
.dashsec.dragging { opacity:.45; }
.dashsec[data-dkey] { -webkit-touch-callout:none; }
/* While a press is in flight, kill text selection so Android's long-press
   selection can't hijack the gesture (added synchronously on press start). */
.dashsec.noselect, .dashsec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
body.secdrag, body.secdrag * { user-select:none !important; -webkit-user-select:none !important; cursor:grabbing !important; }
.dashsec.dcard { display:flex; }
.dashsec.dcard > .card { flex:1; }
/* R.O. detail sections: press and hold (mouse or touch) to move, no grips */
.rosec { position:relative; }
.rosec.dragging { opacity:.45; }
.rosec[data-rosec] { -webkit-touch-callout:none; }
.rosec.noselect, .rosec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
/* Home layout editor rows */
.hlrow { display:flex; align-items:center; gap:.5rem; padding:.4rem .2rem; border-bottom:1px solid var(--line); }
.hlrow:last-child { border-bottom:none; }
.hlrow.hlhead { font-weight:700; font-size:.82rem; color:var(--muted); }
.hlrow .hllabel { flex:1; min-width:0; }
.hlrow .hlrole { flex:0 0 4.6rem; text-align:center; }

/* Quick-action buttons: slide side to side to reorder, no grips. */
#quickactions [data-qkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
#quickactions .qdragging { opacity:.45; cursor:grabbing; }
/* Nav bar tab dragging */
.navlink[data-navkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.navlink.navdragging { opacity:.45; cursor:grabbing; }

/* Recommendation part entry rows (R.O. detail add form) + parts list */
.recpart-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.recpart-row input { width:auto; margin-top:0; }
.recpart-row input[name="partDesc"] { flex:1 1 10rem; }
.recpart-row input[name="partNum"] { flex:1 1 7rem; }
.recpart-row input[name="partQty"] { flex:0 1 4.5rem; }
.recparts { margin:.4rem 0 .2rem; padding-left:1.2rem; }
.recparts li { margin:.25rem 0; }

/* SOS voice assist */
.soslog { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; padding:.25rem 0 .75rem; }
.sosmsg { max-width:88%; padding:.55rem .8rem; border-radius:.9rem; line-height:1.45; font-size:.95rem; }
.sosmsg.you { align-self:flex-end; background:#1e3a5f; color:#fff; border-bottom-right-radius:.25rem; }
.sosmsg.bot { align-self:flex-start; background:#eef2f7; color:#16233a; border-bottom-left-radius:.25rem; }
.soschips { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.sosrow { display:flex; gap:.5rem; align-items:center; }
.sosrow .input { flex:1; }
.sosmic { width:3.2rem; height:3.2rem; border-radius:50%; border:2px solid #1e3a5f; background:#fff; font-size:1.5rem; cursor:pointer; flex:none; }
.sosmic.listening { background:#b91c1c; border-color:#b91c1c; color:#fff; animation:sospulse 1s infinite; }
@keyframes sospulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.sosbig { font-size:1.15rem; padding:.8rem 1.4rem; display:inline-block; margin-top:.2rem; }

/* Techs dropdown in the nav bar */
.navdrop { position:relative; display:inline-block; }
.navdrop > summary { list-style:none; cursor:pointer; }
.navdrop > summary::-webkit-details-marker { display:none; }
.navdrop > summary::marker { content:''; font-size:0; }
.navdrop .navmenu { display:none; position:absolute; top:calc(100% + .35rem); left:0; z-index:80; min-width:14rem; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
.navdrop[open] .navmenu { display:block; }
.navmenu a { display:block; padding:.55rem .8rem; border-radius:.4rem; color:var(--txt); text-decoration:none; font-weight:600; white-space:nowrap; }
.navmenu a:hover { background:var(--panel); }
.navmenu a.navall { border-top:1px solid var(--line); margin-top:.25rem; color:var(--acc); }
/* Sidebar layout: expand in-flow (the sidebar scrolls, so no floating menu). */
body.sidenav .navdrop { display:block; }
body.sidenav .navdrop .navmenu { position:static; box-shadow:none; border:none; background:transparent; padding:.1rem 0 .3rem .8rem; min-width:0; }
body.sidenav .navdrop .navmenu a { color:#c3cfe4; padding:.4rem .6rem; }
body.sidenav .navdrop .navmenu a:hover { background:rgba(255,255,255,.14); color:#fff; }
body.sidenav .navdrop .navmenu a.navall { border-top:1px solid rgba(255,255,255,.15); color:#9fc1ff; }
@media (max-width:760px) {
  /* Phone strip scrolls sideways — the menu becomes a fixed panel under the tab (JS sets top). */
  .navdrop .navmenu, body.sidenav .navdrop .navmenu { position:fixed; left:.6rem; right:.6rem; top:7rem; min-width:0; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
  .navdrop .navmenu a, body.sidenav .navdrop .navmenu a { color:var(--txt); }
  .navdrop .navmenu a:hover, body.sidenav .navdrop .navmenu a:hover { background:var(--panel); color:var(--txt); }
  .navdrop .navmenu a.navall, body.sidenav .navdrop .navmenu a.navall { color:var(--acc); border-top:1px solid var(--line); }
}

/* Customer online booking (/book) */
.svccards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.5rem; margin:.5rem 0; }
.svccard { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #d7dee9; border-radius:10px; padding:.7rem .8rem; cursor:pointer; background:#fff; }
.svccard input { width:auto; margin-top:.2rem; }
.svccard:has(input:checked) { border-color:#16294d; box-shadow:0 0 0 2px #16294d33; }
.chiprow { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { border:1px solid #d7dee9; background:#fff; border-radius:999px; padding:.45rem .9rem; cursor:pointer; font-size:.95rem; }
.chip.sel { background:#16294d; color:#fff; border-color:#16294d; }
.chip.taken { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.maintline { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #e3e8f0; border-radius:8px; padding:.6rem .7rem; margin:.4rem 0; cursor:pointer; background:#fbfcfe; }
.heroesline { display:flex; gap:.6rem; align-items:flex-start; border:1px dashed #b98a1d; border-radius:8px; padding:.7rem .8rem; background:#fffdf4; cursor:pointer; }

/* Pinned nav items (Tech Reports, My techs): fixed at the bottom of the nav */
.navpinned { border-top:1px solid var(--line); border-radius:0; }
body.sidenav .navpinned { border-top-color:rgba(255,255,255,.15); }