/* Theme mirrors production.coloradoenvelope.com: Rubik, purple sidebar #673091, white topbar, #edf1f5 content, white cards. */
:root{--bg:#edf1f5;--card:#fff;--ink:#212529;--muted:#67757c;--line:#e9ecef;--accent:#673091;--accent2:#009efb;--sidebar:#673091;--sidebar-ink:#fff;--sidebar-hover:#009efb;--sidebar-sub:#522674;--sidebar-logo:#482165;
--warn:#9a3d12;--warnbg:#fff2e8;--ok:#1f6f3f;--okbg:#e8f5ec;--bad:#9b1c1c;--badbg:#fdeaea;--sample:#7a4a00;--samplebg:#fff6d6;--info:#009efb}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;font:14px/1.5 "Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{display:flex;min-height:100vh}
.sidebar{width:195px;flex:0 0 195px;background:var(--sidebar);color:var(--sidebar-ink);position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{display:flex;align-items:center;justify-content:center;height:79px;padding:0 15px;background:var(--sidebar-logo)}
.sidebar .logo img{height:52px;width:auto}
.sidebar nav{padding:0 0 30px}
.nav-group{padding:0}
.nav-group a{display:block;padding:14px 15px;color:#fff;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;transition:color .1s ease-in}
.nav-group a.sub{padding-left:20px;background:var(--sidebar-sub)}
.nav-group.dark,.nav-group.dark a.sub{background:#000}   /* the site paints its Production Orders group black (inline style in its bundle) */
.nav-group a:hover,.nav-group a.active{color:var(--sidebar-hover)}
.nav-group.machines{background:var(--sidebar-sub);padding:10px 0}
.nav-group.machines a{padding:7px 15px 8px 20px;font-size:14px}
.nav-group.estimator{background:var(--sidebar-sub);margin-top:10px;padding:6px 0 10px}
.nav-title{display:block;padding:8px 15px 2px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#d8c7ea}
.content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:0 24px;min-height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
/* page-title strip like the site's: title left, breadcrumb right, on the grey page background */
.page-titles{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:2px 0 14px}
.page-title{font-size:20px;font-weight:400;color:#455a64;margin:0}
.page-titles .breadcrumb{margin:0;font-size:13px;color:var(--accent2)}.page-titles .breadcrumb a{color:var(--muted)}
.topbar-right{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
main{padding:18px 24px 50px;max-width:1500px}
h1{font-size:20px;font-weight:500;margin:4px 0 12px;color:#455a64}
h2{font-size:15.5px;font-weight:500;margin:16px 0 8px;color:var(--accent)}
h3{font-size:14px;font-weight:500;margin:12px 0 6px}
.card{background:var(--card);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:16px 18px;margin-bottom:16px}
.card-title{font-size:16px;font-weight:500;color:#455a64;margin:0 0 10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}
.tile{display:block;background:#fff;border-left:4px solid var(--accent);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:18px 16px;color:var(--ink);text-decoration:none}
.tile:hover{box-shadow:0 2px 8px rgba(0,0,0,.12);text-decoration:none}
.tile b{display:block;font-size:17px;font-weight:500;margin-bottom:4px;color:var(--accent)}
.tile span{color:var(--muted);font-size:13px}
.strip{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);padding:8px 12px;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.strip b{color:var(--ink)}
.flash{padding:10px 14px;border-radius:4px;margin:0 0 12px;font-weight:500}
.flash.msg{background:var(--okbg);color:var(--ok)}
.flash.err{background:var(--badbg);color:var(--bad)}
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11.5px;font-weight:500;white-space:nowrap}
.badge.ok{background:var(--okbg);color:var(--ok)}
.badge.warn{background:var(--warnbg);color:var(--warn)}
.badge.bad{background:var(--badbg);color:var(--bad)}
.badge.sample{background:var(--samplebg);color:var(--sample)}
.badge.muted{background:#eceff2;color:var(--muted)}
.badge.info{background:#e3f3fd;color:#0b6aa8}
.banner{padding:10px 14px;border-radius:4px;margin:10px 0;border-left:4px solid}
.banner.warn{background:var(--warnbg);border-color:var(--warn);color:#5a2a0a}
.banner.bad{background:var(--badbg);border-color:var(--bad);color:#6b1313}
.banner.ok{background:var(--okbg);border-color:var(--ok);color:#154d2b}
.banner.sample{background:var(--samplebg);border-color:var(--sample);color:#5a3800}
.banner.info{background:#e3f3fd;border-color:var(--info);color:#0b4a73}
/* tables: the production site's DataTables look — bordered cells, striped rows, bold header, hover */
table{border-collapse:collapse;width:100%;font-size:13.5px;border:1px solid #dee2e6;background:#fff}
th,td{text-align:left;padding:7px 10px;border:1px solid #dee2e6;vertical-align:top}
th{background:#f1f3f6;font-size:12.5px;color:#455a64;font-weight:600;border-bottom:2px solid #d5dbe1;white-space:nowrap}
tbody tr:nth-child(even) td{background:#f8f9fb}
tbody tr:hover td{background:#eef3f8}
tr.editing td{background:#fff8e6 !important}
table.small{font-size:12.5px}
.kv dd table,.card > table{margin-top:4px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
form.inline{display:inline}
label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:8px 0 3px;text-transform:uppercase;letter-spacing:.3px}
input[type=text],input[type=number],input[type=password],input[type=date],select,textarea{width:100%;padding:8px 10px;border:1px solid #ced4da;border-radius:4px;font:inherit;background:#fff;color:var(--ink)}
textarea{min-height:60px}
.grid{display:grid;gap:12px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:1fr 1fr 1fr}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
button,.btn{display:inline-block;padding:8px 16px;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-weight:500;cursor:pointer;text-decoration:none}
button.secondary,.btn.secondary{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn.info,button.info{background:var(--info);border-color:var(--info);color:#fff}
button.small,.btn.small{padding:5px 10px;font-size:12.5px}
button.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
button:disabled{opacity:.5;cursor:not-allowed}
.btn:hover,button:hover{text-decoration:none;filter:brightness(1.05)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:4px 12px;font-size:13.5px}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.steps{background:#f6f8fa;border:1px dashed #ced4da;border-radius:4px;padding:8px 12px;font-size:13px}
.steps div{padding:2px 0}
.searchbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.searchbar>div{flex:1 1 150px}
.searchbar input[type=text]{font-size:15px;padding:9px}
.np{color:#8a8f94;font-style:italic}
.pdfbox{width:100%;height:520px;border:1px solid var(--line);border-radius:4px;background:#eee}
details summary{cursor:pointer;font-weight:500;color:var(--accent)}
.total{font-size:20px;font-weight:700}
.guide h2{margin-top:22px}
.guide li{margin:3px 0}
footer{margin-top:40px;color:var(--muted);font-size:12px;text-align:center}
.pager{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0;font-size:12.5px}
.pager a,.pager span{padding:3px 8px;border:1px solid #ced4da;border-radius:3px;background:#fff}
.pager span.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.breadcrumb{font-size:12.5px;color:var(--muted);margin:-4px 0 10px}
.breadcrumb a{color:var(--accent2)}
/* simple bar charts (dashboard) */
.chart{display:grid;grid-template-columns:36px 1fr;gap:6px;height:230px;font-size:11px;color:var(--muted)}
.chart .yaxis{display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding-bottom:18px}
.chart .bars{display:flex;align-items:flex-end;gap:6px;border-left:1px solid #ddd;border-bottom:1px solid #ddd;padding:0 4px;position:relative}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.chart .bar{width:60%;display:flex;gap:2px;align-items:flex-end;height:100%}
.chart .bar i{flex:1;display:block;background:#c0392b;opacity:.85;border-radius:2px 2px 0 0}
.chart .bar i.b{background:#2f86c7}
.chart .lbl{position:absolute;bottom:-18px;font-size:11px}
.legend{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:4px}
.legend i{display:inline-block;width:22px;height:9px;margin:0 4px 0 10px;vertical-align:middle;background:#c0392b}
.legend i.b{background:#2f86c7}
/* tabs (Site Tables) */
/* tabs like the site's (Bootstrap nav-tabs): blue links, the active one boxed white */
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #dee2e6;padding:12px 18px 0}
.tabs .tab{padding:9px 16px;font-size:14px;color:var(--accent2);text-decoration:none;border:1px solid transparent;border-radius:4px 4px 0 0;margin:0 4px -1px 0}
.tabs .tab.active{color:#495057;background:#fff;border-color:#dee2e6 #dee2e6 #fff}
.tabs .tab:hover{text-decoration:none;border-color:#e9ecef #e9ecef #dee2e6}.tabs .tab.active:hover{border-color:#dee2e6 #dee2e6 #fff}
th[data-dir]{color:var(--accent)}

/* dieline variant chips (die page) */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:4px;padding:3px 8px;margin:2px 4px 2px 0;font-size:12.5px;background:#fff}
.chip.muted{opacity:.55}
.chip form{margin:0}
table.dielines td{vertical-align:top}

/* schedule grid like the site's: compact read-only rows (long text clipped with …, Expand / Collapse shows it all); the pencil turns one row into inputs */
table.schedule td{vertical-align:middle;padding:6px 8px}
table.schedule input,table.schedule select{font-size:12.5px;padding:4px 6px;width:auto;min-width:0}
table.schedule.collapsed td{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.schedule.collapsed td.act,table.schedule.collapsed td.num{max-width:none;overflow:visible}
table.schedule tr.editing td{white-space:normal;overflow:visible;max-width:none;background:#fff8e6}
table.schedule .e{display:none}
table.schedule tr.editing .e{display:inline-block}
table.schedule tr.editing .v{display:none}
table.schedule tr.editing select.e{min-width:120px}
table.schedule td.act .v{display:inline-flex}
table.schedule tr.editing td.act .v{display:none}
input.num{text-align:right}

/* pop-ups (vendor edit / contacts), like the site's modals */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:50;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:6px;max-width:1100px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:500;font-size:16px;color:#455a64}
.modal-b{padding:14px 16px}
.modal-b table input[type=text]{padding:5px 7px;font-size:12.5px}

/* vendors page: equal-width actions, contact state colours, suggestions */
table.vendors .act{display:inline-block;width:118px;text-align:center;box-sizing:border-box;margin:1px 2px 1px 0;padding:6px 8px;vertical-align:middle}
.small.no-contacts{background:#fdf1e3;color:#9a5a00;border-color:#f0c48a}
.small.has-contacts{background:#e8f5ea;color:#1e6b34;border-color:#a9d6b2}
.sugg{color:#b71c1c;font-style:italic;font-size:12.5px}
.sugg i{font-style:italic}
.sugg .muted{font-style:normal}
button.icon{padding:1px 7px;font-size:13px;line-height:1.3;border-radius:3px;margin:0 1px;vertical-align:middle}
button.icon.ok{background:#1e7b34;border-color:#1e7b34;color:#fff}
button.icon.no{background:#fff;border-color:#b71c1c;color:#b71c1c}

/* delete = trash can everywhere */
/* icon buttons: exactly the height of a small text button (32px), square, icon centred */
button.small,.btn.small,table.vendors .act{height:32px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}
a.pencil,button.pencil,button.trash{width:32px;height:32px;padding:0;margin:0 2px 0 0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:0;vertical-align:middle;border-radius:4px}
a.pencil .ico,button.pencil .ico,button.trash .ico{width:18px;height:18px;display:block;margin:0}
a.pencil,button.pencil,.pencil.secondary{background:var(--accent2);border:1px solid var(--accent2);color:#fff}
a.pencil:hover,button.pencil:hover{background:#0b7fc9;border-color:#0b7fc9}
button.trash{background:var(--bad);border:1px solid var(--bad);color:#fff}
button.trash:hover{background:#7a1414;border-color:#7a1414;color:#fff}
table.vendors .act.trash,table.vendors .act.pencil{width:32px;padding:0}
form.inline{display:inline-flex;vertical-align:middle;align-items:center;gap:8px}   /* flex eats the whitespace between label, field and button; the gap puts it back */
form.inline label{margin:0;white-space:nowrap}
.nowrap,td.nowrap{white-space:nowrap}
/* a trash button in a row of full-size buttons is as tall as its neighbours (the form wrapper steps aside so the button is the flex item) */
.actions>form.inline{display:contents}
.actions>form.inline>button.trash{align-self:stretch;height:auto;min-height:32px;width:40px;flex:0 0 40px}
.actions>form.inline>button.trash .ico{width:20px;height:20px}
.actions.tight{flex-wrap:nowrap;gap:6px}
.actions.tight>.btn,.actions.tight>button:not(.trash){padding-left:11px;padding-right:11px;white-space:nowrap}
/* card header with action buttons on the right (Machines: + Add / Categories, as on the site) */
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.card-top .card-title{margin:0}
/* "Add Location" / "Add Category" rows under a table, like the site's */
h3.addhead{font-size:20px;font-weight:400;color:#455a64;margin:18px 0 8px}
form.addrow label{display:inline;font-size:14px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0;margin:0}
label.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0;margin:0;white-space:nowrap}
/* View Schedules: three columns (Jet / Folding / Straight Knife) of machine queues, like the site */
.viewsched{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vs-head{text-align:center;font-size:15px;color:#455a64;font-weight:500;margin:4px 0 10px}
.vs-machine{margin-bottom:16px}
.vs-title{font-weight:500;margin:0 0 4px;font-size:13.5px}
.vs-table{font-size:11.5px}
.vs-table th,.vs-table td{padding:4px 5px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1400px){.viewsched{grid-template-columns:1fr}}
/* icon buttons that are not pencil / trash (print) */
button.iconbtn,a.iconbtn{width:32px;height:32px;padding:0;margin:0 2px 0 0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:0;vertical-align:middle;border-radius:4px;background:var(--info);border:1px solid var(--info);color:#fff}
a.iconbtn .ico,button.iconbtn .ico{width:18px;height:18px;display:block}
/* Dev Chat */
.nav-group.chat{background:var(--sidebar-sub);margin-top:6px}
.chat-badge{display:inline-block;min-width:20px;padding:1px 6px;border-radius:10px;background:#e53935;color:#fff;font-size:11.5px;font-weight:500;text-align:center;margin-left:6px}
.chat-fab{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:24px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none;z-index:40}
.chat-fab:hover{filter:brightness(1.1);text-decoration:none}
.chatwrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:18px;align-items:start}
.composer label{margin-bottom:5px}
.composer input[type=text],.composer select,.composer textarea{padding:9px 11px;font-size:14px}
.composer input[type=file]{padding:6px 0;font-size:13px}
@media(max-width:1200px){.chatwrap{grid-template-columns:1fr}}
.chatlist{max-height:calc(100vh - 220px);overflow-y:auto}
.chat-tabs{flex-wrap:nowrap}
.chat-tabs .tab{padding:6px 12px;font-size:13px;white-space:nowrap}
.msg{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0;background:#fff}
.msg.mine{background:#f6f2fb;border-color:#e3d6f1}
.msg.done{opacity:.75}
.msg-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.msg-head b{color:var(--ink);font-size:13.5px}
.msg-head .about{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:#eef3f8;padding:1px 6px;border-radius:3px}
.msg-head .when{margin-left:auto}
.msg-body{white-space:pre-wrap;word-break:break-word;font-size:14px}
.msg-img{max-width:100%;max-height:360px;border:1px solid var(--line);border-radius:4px;margin-top:8px;display:block}
.reply{margin:8px 0 0 22px;padding:8px 10px;border-left:3px solid #d8c7ea;background:#fafafa;border-radius:0 4px 4px 0}
.reply.mine{border-left-color:var(--accent)}
.msg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.composer{position:sticky;top:70px}
/* die locations editor + cabinet map */
table.locs input,table.locs select{padding:4px 6px;font-size:12.5px}
table.locs tr.ok td:first-child{border-left:3px solid var(--ok)}
.cabmap{display:flex;flex-direction:column;gap:8px}
.shelf{display:grid;grid-template-columns:110px 1fr;gap:8px;border:1px solid var(--line);border-radius:4px;padding:6px 8px;background:#fafbfc}
.shelf-name{font-weight:500;color:#455a64;font-size:13px;padding-top:4px}
.shelf .side{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:4px}
.side-name{font-size:11.5px;color:var(--muted);min-width:52px;text-transform:uppercase;letter-spacing:.3px}
.cabmap .die,.die{display:inline-block;min-width:34px;text-align:center;padding:3px 6px;border:1px solid #c9d2db;border-radius:3px;background:#fff;font-size:12px;color:var(--ink);text-decoration:none}
.cabmap .die:hover{border-color:var(--accent);text-decoration:none}
.die.out{background:#fff2e8;border-color:#e0a070}
.die.mis{background:#fdeaea;border-color:#d08080;color:var(--bad)}
.msg .e,.reply .e{display:none}.msg.editing>.e,.reply.editing>.e{display:block}.msg.editing>.v,.reply.editing>.v{display:none}
/* dashboard stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.stat{display:block;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:12px 14px;text-decoration:none;color:var(--ink);border-left:4px solid var(--accent)}
.stat b{display:block;font-size:26px;font-weight:500;line-height:1.1}.stat span{font-size:12.5px;color:var(--muted)}
.stat.warn{border-left-color:#e0a070}.stat.bad{border-left-color:var(--bad)}.stat.ok{border-left-color:var(--ok)}
.stat:hover{box-shadow:0 2px 8px rgba(0,0,0,.12);text-decoration:none}
/* reports heat cells */
.heat{display:inline-block;min-width:40px;padding:1px 4px;border-radius:3px;background:linear-gradient(90deg,#dbe9f6 var(--w),transparent var(--w))}
/* floor plan */
.planwrap{position:relative;display:inline-block;max-width:100%;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;user-select:none}
.planwrap img{display:block;max-width:100%;height:auto}
.planwrap.placing{cursor:crosshair;outline:2px dashed var(--accent)}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);font-size:11.5px;font-weight:500;z-index:3}
.pin::before{content:"";display:block;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pin span{background:rgba(255,255,255,.92);padding:1px 5px;border-radius:3px;margin-top:2px;white-space:nowrap;border:1px solid var(--line)}
.pin.cabinet::before{background:#1e7b34}.pin.inventory::before{background:#009efb}.pin.door::before,.pin.other::before{background:#67757c}
.pin.warn::before{background:#e0a070}.pin.bad::before{background:var(--bad)}
.planwrap.placing .pin{cursor:move}
.pin-key{display:inline-block;width:11px;height:11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);margin:0 3px 0 8px;vertical-align:middle}
.pin-key.cabinet{background:#1e7b34}.pin-key.inventory{background:#009efb}.pin-key.door{background:#67757c}
.pinrow{padding:4px 6px;border-radius:3px;font-size:13px}.pinrow.picked{background:#efe9f3;outline:1px solid var(--accent)}.pinrow.placed{color:var(--muted)}.pinrow.placed a{color:var(--accent2)}
.pinrow .pick{width:26px;height:26px;padding:0;font-size:14px;line-height:1}
.pin.device::before{background:#7a4a00}.pin-key.device{background:#7a4a00}
/* grouped, collapsible sidebar */
.nav-head{display:flex;justify-content:space-between;align-items:center;font-weight:500}
.nav-head .caret{font-size:12px;opacity:.8;transition:transform .15s}
.nav-group.closed .nav-head .caret{transform:rotate(-90deg)}
.nav-group.closed .nav-body{display:none}
.nav-group.machines{padding:0}.nav-group.machines .nav-body{padding:6px 0}
.nav-group.estimator{padding:0}.nav-group.estimator .nav-body{padding:0 0 8px}
.nav-group .nav-body a.active{color:var(--sidebar-hover)}
/* top bar: menu button + global search */
.topbar-left{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.hamburger{display:none;background:none;border:1px solid var(--line);color:#455a64;font-size:20px;line-height:1;padding:4px 10px;border-radius:4px}
.gsearch{display:flex;gap:6px;align-items:center;max-width:460px;flex:1 1 auto}
.gsearch input[type=search]{margin:0;padding:7px 10px;font-size:14px;width:100%}
.gsearch button{white-space:nowrap}
/* tablet / phone: sidebar slides in over the page */
.sidebar-shade{display:none}
@media(max-width:900px){
  .wrap{display:block}
  .sidebar{position:fixed;left:-240px;top:0;bottom:0;width:230px;flex:none;height:100vh;z-index:60;transition:left .18s ease;box-shadow:none;overflow-y:auto}
  body.nav-open .sidebar{left:0;box-shadow:4px 0 24px rgba(0,0,0,.35)}
  .sidebar-shade{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
  body.nav-open .sidebar-shade{display:block}
  .hamburger{display:inline-block}
  .content{width:100%}
  main{padding:14px 12px 60px}
  .page-titles{flex-direction:column;align-items:flex-start;gap:4px}
  .chatwrap,.viewsched{grid-template-columns:1fr}
  .composer{position:static}
  table{font-size:12.5px}th,td{padding:6px 7px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
.toc ol{columns:2;column-gap:28px;margin:0;padding-left:20px;font-size:13.5px}.toc li{break-inside:avoid;margin:2px 0}@media(max-width:900px){.toc ol{columns:1}}
.guide h2{scroll-margin-top:70px}