/* Changkid Traffic — workbench UI (MIDAS-style ribbon) */
:root{
  --font-ui:"IBM Plex Sans Thai","Sarabun","Segoe UI",system-ui,sans-serif; --fs:12.5px;
  --title-bg:#1f2a37; --title-fg:#f2f5f8;
  --tabbar-bg:#2b3644; --tab-fg:#dfe6ee; --tab-active-bg:#f6f7f9; --tab-active-fg:#111; --accent:#d4a017; --accent2:#c8102e;
  --ribbon-bg:linear-gradient(#fbfbfc,#eceef1); --group-label-bg:#2b3644; --group-label-fg:#e6ecf2; --group-sep:#cfd5dc;
  --btn-hover:#dbe8f7; --btn-pressed:#b9d3f0; --btn-border:#8fb3dc;
  --dock-bg:#eef3f9; --dock-head:#2b3644; --dock-head-fg:#f0f3f6; --panel-border:#c7d0da;
  --canvas-bg:#e9ecdf; --msg-bg:#fffaf0; --status-bg:#1f2a37; --status-fg:#e8edf2;
  --dialog-bg:#f5f6f8; --field-bg:#fff; --field-border:#b8c2cd; --text:#1b2430; --muted:#5d6b7a;
  --ok:#1e8e3e; --warn:#c77700; --err:#c62828; --sel:#ff7a00;
  --los-A:#1a9850; --los-B:#66bd63; --los-C:#d9ef8b; --los-D:#fee08b; --los-E:#fc8d59; --los-F:#d73027;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ribbon-bg:linear-gradient(#2c333c,#252b33); --tab-active-bg:#2c333c; --tab-active-fg:#f2f2f2; --group-sep:#3d4652;
  --btn-hover:#34475e; --btn-pressed:#2a5a8a; --dock-bg:#1f252c; --panel-border:#3a434e; --canvas-bg:#1b2026; --msg-bg:#191d22;
  --dialog-bg:#232a31; --field-bg:#171b20; --field-border:#46515d; --text:#e4e9ee; --muted:#9aa7b4; --ico-bg:#e3e8ee; --ico-fg:#1b2430; }}
:root[data-theme="dark"]{
  --ribbon-bg:linear-gradient(#2c333c,#252b33); --tab-active-bg:#2c333c; --tab-active-fg:#f2f2f2; --group-sep:#3d4652;
  --btn-hover:#34475e; --btn-pressed:#2a5a8a; --dock-bg:#1f252c; --panel-border:#3a434e; --canvas-bg:#1b2026; --msg-bg:#191d22;
  --dialog-bg:#232a31; --field-bg:#171b20; --field-border:#46515d; --text:#e4e9ee; --muted:#9aa7b4; --ico-bg:#e3e8ee; --ico-fg:#1b2430; }
*{box-sizing:border-box}
.rbtn svg,.rsmall svg,.rfield svg.fico,.tree svg.ic{background:var(--ico-bg,transparent);color:var(--ico-fg,inherit);border-radius:5px}   /* dark theme: light tile + dark ink (icons drawn in currentColor too) */
#qat button:disabled{opacity:.35;cursor:default}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font-ui);font-size:var(--fs);color:var(--text);background:var(--dock-bg)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
#app{display:grid;height:100vh;grid-template-rows:auto auto 1fr auto;grid-template-columns:100%}   /* top row (logo + tabs) · ribbon · work area · status */

/* ① title */
#titlebar{display:flex;align-items:stretch;gap:8px;background:var(--title-bg);color:var(--title-fg);height:34px;padding:0 8px 0 10px}
#titlebar > *{align-self:center}
#titlebar .logo{display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.2px}
#titlebar .logo svg{width:22px;height:22px}
#titlebar .logo img{height:28px;width:auto;display:block;filter:drop-shadow(0 1px 1px #0006)}   /* dark-bar wordmark: transparent, light letters (logo-wordmark-dark.png) */
#titlebar .qat{display:flex;gap:2px;flex:none}
#titlebar .qat button{background:none;border:0;color:var(--title-fg);width:26px;height:26px;border-radius:4px;cursor:pointer}
#titlebar .qat button:hover{background:#ffffff22}
#titlebar .doc{flex:0 1 auto;max-width:220px;min-width:0;font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#titlebar .doc .dirty{color:#ffb74d;margin-left:4px}
#titlebar.nodoc .doc{display:none}
#canvasbar{position:absolute;top:8px;right:8px;z-index:5;display:flex;gap:6px;align-items:flex-start}
#viewmode{display:flex;background:var(--panel-bg,#fff);border:1px solid var(--panel-border);border-radius:6px;overflow:hidden;box-shadow:0 1px 3px #0002}
#viewmode button{border:0;background:none;padding:3px 9px;font-size:12px;cursor:pointer;color:inherit}
#viewmode button + button{border-left:1px solid var(--panel-border)}
#viewmode button.on{background:var(--accent);color:#fff}
#titlebar .ver{flex:none;font-size:11px;background:none;border:1px solid #ffffff33;color:var(--title-fg);opacity:.8;border-radius:10px;padding:1px 8px;cursor:pointer}
#titlebar .ver:hover{opacity:1;background:#ffffff1f}

/* ② tabs */
#tabs{display:flex;flex:1 1 auto;min-width:0;align-self:stretch !important;background:transparent;height:34px;padding-left:4px;overflow-x:auto;scrollbar-width:none}
#tabs button{background:none;border:0;color:var(--tab-fg);padding:0 12px;height:34px;cursor:pointer;white-space:nowrap;border-top:3px solid transparent;border-radius:4px 4px 0 0}
#tabs button:hover{background:#ffffff14}
#tabs button.active{background:var(--tab-active-bg);color:var(--tab-active-fg);border-top-color:var(--accent);font-weight:600}
#tabs .spacer{flex:1}
#tabs.compact button{padding:0 8px;font-size:12px}

/* ③ ribbon body */
#ribbon{display:flex;background:var(--ribbon-bg);border-bottom:1px solid var(--panel-border);height:96px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#ribbon.scrolls{height:106px}
#ribbon.collapsed{display:none}
.rgroup{display:flex;flex-direction:column;border-right:1px solid var(--group-sep);min-width:0;flex-shrink:0}   /* groups keep their width; a ribbon wider than the window scrolls */
.rgroup .items{display:flex;align-items:stretch;gap:2px;padding:3px 4px;flex:1}
.rgroup .glabel{background:var(--group-label-bg);color:var(--group-label-fg);font-size:11px;text-align:center;padding:1px 6px;white-space:nowrap}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:52px;max-width:84px;padding:3px 4px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;line-height:1.15;text-align:center}
.rbtn svg{width:30px;height:30px;flex:none}
.rbtn span{font-size:11.5px}
.rbtn,.rsmall,.rfield,.rstack{flex-shrink:0}   /* never squeeze a button below its label (labels used to overlap the next button on narrow screens) — the ribbon scrolls instead */
.rbtn:hover{background:var(--btn-hover);border-color:var(--btn-border)}
.rbtn.on{background:var(--btn-pressed);border-color:var(--btn-border)}
.rbtn:disabled{opacity:.4;cursor:default;background:none;border-color:transparent}
.rstack{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:1px 6px;align-content:center}
.rsmall{display:flex;align-items:center;gap:5px;padding:1px 6px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;white-space:nowrap;text-align:left;height:24px}
.rsmall svg{width:16px;height:16px}
.rsmall:hover{background:var(--btn-hover);border-color:var(--btn-border)}
.rsmall.on{background:var(--btn-pressed)}
#ribbon.compact .rsmall span{display:none}
#ribbon.compact .rsmall{padding:1px 4px}
#ribbon.compact .rgroup .glabel{font-size:10px;padding:1px 3px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rfield{display:flex;align-items:center;gap:4px;padding:1px 4px;white-space:nowrap;height:24px}
.rfield select,.rfield input{height:21px;border:1px solid var(--field-border);background:var(--field-bg);border-radius:2px;padding:0 3px}
.rfield input{width:52px}
.rfield.v2{align-items:center;gap:5px;height:auto;padding:2px 4px}
.rfield .fcol{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rfield svg.fico{width:20px;height:20px;flex:none}
.rfield.v2 svg.fico{width:30px;height:30px}   /* two-line fields: same size as the big buttons' icons */
.rfield.v2 .lbl{font-size:11px;opacity:.75;line-height:1}
.rfield.v2 select{width:138px;height:22px}

/* main area */
#main{display:grid;grid-template-columns:240px 1fr 290px;min-height:0;border-top:1px solid var(--panel-border)}
#main.noleft{grid-template-columns:0 1fr 290px}
#main.noright{grid-template-columns:240px 1fr 0}
.dock{background:var(--dock-bg);display:flex;flex-direction:column;min-height:0;overflow:hidden;border-right:1px solid var(--panel-border)}
#right{border-right:0;border-left:1px solid var(--panel-border)}
.dock-head{background:var(--dock-head);color:var(--dock-head-fg);padding:4px 8px;display:flex;align-items:center;gap:6px;font-weight:600}
.dock-head .sp{flex:1}
.dock-head button{background:none;border:0;color:inherit;cursor:pointer;opacity:.8}
.dock-tabs{display:flex;border-bottom:1px solid var(--panel-border)}
.dock-tabs button{flex:1;border:0;background:none;padding:5px 2px;cursor:pointer;border-bottom:2px solid transparent;color:var(--muted)}
.dock-tabs button.active{border-bottom-color:var(--accent);color:var(--text);font-weight:600}
.dock-body{flex:1;overflow:auto;padding:4px 2px}
.tree{list-style:none;margin:0;padding-left:12px}
.tree.root{padding-left:2px}
.tree li{margin:0}
.tree .node{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;cursor:pointer;white-space:nowrap}
.tree .node:hover{background:var(--btn-hover)}
.tree .node.sel{background:var(--btn-pressed)}
.tree .tg{width:12px;text-align:center;color:var(--muted)}
.tree .ic{width:14px;height:14px;flex:none}
.tree .cnt{color:var(--muted);font-size:11px}

#center{display:grid;grid-template-rows:1fr auto;min-height:0;min-width:0}
#viewwrap{position:relative;min-height:0;background:var(--canvas-bg);overflow:hidden}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#view3d{position:absolute;inset:0;display:none;background:#a9cbe8}
#viewwrap.m3d #view{display:none}
#viewwrap.m3d #view3d{display:block}
#viewwrap.msplit #view{width:50%}
#viewwrap.msplit #view3d{display:block;left:50%;border-left:2px solid var(--accent)}
#viewwrap.m3d #legend,#viewwrap.m3d #toolhint{display:none}
#viewwrap.msplit #legend{right:calc(50% + 10px)}
#view3db{position:absolute;top:0;bottom:0;left:0;right:50%;display:none;background:#a9cbe8}
#viewwrap.mcompare #view{display:none}
#viewwrap.mcompare #view3d{display:block;left:50%;border-left:3px solid #fff}
#viewwrap.mcompare #view3db{display:block}
#viewwrap.mcompare #legend,#viewwrap.mcompare #toolhint{display:none}
.cmptag{position:absolute;top:44px;display:none;background:#1b2430d9;color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;z-index:3;white-space:nowrap;max-width:calc(50% - 20px);overflow:hidden;text-overflow:ellipsis}
#cmpA{left:10px}#cmpB{left:calc(50% + 10px)}
#viewwrap.mcompare .cmptag{display:block}
#hud{position:absolute;left:10px;right:240px;top:8px;display:flex;gap:6px;pointer-events:none;flex-wrap:wrap}   /* right: room for the problems badge + 2D|3D switch */
#viewwrap.msplit #hud,#viewwrap.mcompare #hud{right:calc(50% + 10px)}   /* stays over its own (2D / after) view */
.chip{background:#1f2a37e0;color:#fff;border-radius:12px;padding:2px 10px;font-size:12px;white-space:nowrap}
.chip b{color:#ffd166}
#legend{position:absolute;right:10px;bottom:10px;background:#ffffffe8;color:#222;border:1px solid #bbb;border-radius:6px;padding:6px 8px;font-size:11px;max-width:220px}
#legend .row{display:flex;align-items:center;gap:6px;margin:1px 0}
#legend i{display:inline-block;width:14px;height:8px;border-radius:2px}
#attrib{position:absolute;left:6px;bottom:4px;font-size:11px;line-height:16px;background:#ffffffc8;color:#333;padding:0 3px 0 5px;border-radius:3px;display:flex;align-items:center;gap:2px;max-width:calc(100% - 12px)}
#toolhint{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:#d4a017;color:#111;border-radius:12px;padding:3px 12px;font-weight:600;display:none}

/* ⑧ message window */
#msg{height:128px;background:var(--msg-bg);border-top:1px solid var(--panel-border);display:flex;flex-direction:column;min-height:0}
#msg.hidden{display:none}
#msglog{flex:1;overflow:auto;font-family:Consolas,"Cascadia Mono",monospace;font-size:12px;padding:3px 8px}
#msglog .w{color:var(--warn)} #msglog .e{color:var(--err)} #msglog .o{color:var(--ok)} #msglog .adv{color:#2f6fdb}
.advice{border-left:3px solid #2f6fdb;background:#2f6fdb12;padding:4px 8px;margin:6px 0;border-radius:0 4px 4px 0;font-size:12px}
.advice > b{color:#2f6fdb;margin-right:4px}
.noadvice .advice,.noadvice #msglog .adv{display:none}
#cmdline{display:flex;border-top:1px solid var(--panel-border)}
#cmdline span{padding:2px 6px;color:var(--muted);font-family:monospace}
#cmdline input{flex:1;border:0;background:transparent;outline:none;font-family:monospace}

/* ⑨ status */
#status{display:flex;gap:14px;align-items:center;background:var(--status-bg);color:var(--status-fg);height:24px;padding:0 10px;font-size:12px;white-space:nowrap;overflow:hidden}
#status .sp{flex:1}

/* properties panel */
.props{padding:6px 8px}
.libh{padding:6px 8px 2px;font-weight:600;font-size:12px;border-top:1px solid var(--panel-border)}
.libi{padding:4px 8px;cursor:pointer;font-size:12px;border-radius:3px;margin:1px 4px}
.libi:hover{background:var(--hover,#dbe8f7)}
.libi.sel{outline:2px solid var(--accent,#c8102e)}
.libi .lt{margin-bottom:2px}
.props h3{margin:6px 0 4px;font-size:13px}
.props h3 svg.ic,.props h3 .ic{width:16px;height:16px;vertical-align:-3px}
.props .muted{color:var(--muted)}
.fgrid{display:grid;grid-template-columns:minmax(0,max-content) minmax(96px,1fr) auto;gap:4px 6px;align-items:center}
.fgrid label{color:var(--muted);white-space:normal;line-height:1.25;max-width:150px}   /* long labels wrap instead of pushing the inputs to 44 px (Team U 26 Oct) */
.fgrid input,.fgrid select{width:100%;height:24px;border:1px solid var(--field-border);background:var(--field-bg);border-radius:3px;padding:0 5px}
.fgrid input[type=checkbox]{width:auto;height:auto}
.fgrid .u{color:var(--muted);font-size:11px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.btn{border:1px solid var(--field-border);background:var(--field-bg);border-radius:4px;padding:4px 10px;cursor:pointer}
.btn:hover{background:var(--btn-hover)}
.btn.pri{background:#2f6fdb;color:#fff;border-color:#2f6fdb}
.btn.pri:hover{background:#255bb6}
.btn.warn{color:var(--err)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpi div{background:var(--field-bg);border:1px solid var(--panel-border);border-radius:6px;padding:5px 7px}
.kpi b{display:block;font-size:16px}
.kpi small{color:var(--muted)}
.los{display:inline-block;min-width:22px;text-align:center;border-radius:3px;font-weight:700;color:#111;padding:0 4px}
.los.A{background:var(--los-A);color:#fff}.los.B{background:var(--los-B)}.los.C{background:var(--los-C)}.los.D{background:var(--los-D)}.los.E{background:var(--los-E)}.los.F{background:var(--los-F);color:#fff}
.tag{display:inline-block;background:#d4a01733;color:var(--text);border:1px solid #d4a017;border-radius:10px;padding:0 6px;font-size:11px}
.tag.est{background:#c7770022;border-color:#c77700}
.tag.appr{background:#2e7d3222;border-color:#2e7d32}

/* dialogs */
#dlgs{position:fixed;inset:0;pointer-events:none;z-index:50}
.dlg-back{position:fixed;inset:0;background:#0006;pointer-events:auto}
.dlg{position:fixed;background:var(--dialog-bg);border:1px solid var(--panel-border);border-radius:6px;box-shadow:0 10px 40px #0005;display:flex;flex-direction:column;pointer-events:auto;max-width:96vw;max-height:92vh}
.dlg-head{background:var(--dock-head);color:var(--dock-head-fg);padding:6px 10px;display:flex;align-items:center;gap:8px;border-radius:6px 6px 0 0;cursor:move;user-select:none}
.dlg-head .t{flex:1;font-weight:600}
.dlg-head button{background:none;border:0;color:inherit;font-size:16px;cursor:pointer}
.dlg-body{padding:10px 12px;overflow:auto;flex:1}
.dlg-foot{display:flex;gap:8px;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--panel-border)}
.dlg-foot .sp{flex:1}
table.grid{border-collapse:collapse;width:100%;font-size:12px}
table.grid th,table.grid td{border:1px solid var(--panel-border);padding:3px 6px;text-align:right;white-space:nowrap}
table.grid th{background:var(--dock-bg);text-align:center;position:sticky;top:0;z-index:1}
table.grid td.l{text-align:left}
table.grid input{width:70px;border:1px solid var(--field-border);background:var(--field-bg);text-align:right;padding:1px 3px}
table.grid tr.sel td{background:var(--btn-pressed)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.card{border:1px solid var(--panel-border);background:var(--field-bg);border-radius:8px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.card:hover{border-color:#2f6fdb;box-shadow:0 0 0 2px #2f6fdb33}
.card.sel{border-color:#2f6fdb;box-shadow:0 0 0 2px #2f6fdb}
.card svg{width:100%;height:96px;background:var(--canvas-bg);border-radius:4px}
.card b{font-size:13px}
.card small{color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note{background:#d4a01722;border-left:3px solid #d4a017;padding:6px 8px;border-radius:3px;margin:6px 0}
.chartbox{background:var(--field-bg);border:1px solid var(--panel-border);border-radius:6px;padding:4px;margin:6px 0}
.chartbox canvas{width:100%;height:180px;display:block}
.sigbar{display:flex;height:22px;border-radius:3px;overflow:hidden;border:1px solid var(--panel-border);margin:4px 0}
.sigbar div{display:flex;align-items:center;justify-content:center;font-size:10px;color:#111;overflow:hidden;white-space:nowrap}
#map{height:420px;border-radius:6px;border:1px solid var(--panel-border)}

@media (max-width:1100px){ #main{grid-template-columns:0 1fr 260px} .rbtn{min-width:44px} .rbtn span{font-size:10.5px} }
@media (max-width:760px){
  #main{grid-template-columns:0 1fr 0}
  #ribbon{height:84px} #msg{height:90px} .rbtn svg{width:24px;height:24px} .rfield.v2 svg.fico{width:24px;height:24px}
  #titlebar .doc{display:none}
}
@media print{ body{overflow:visible} }

.dlg-body .two > div > svg{width:100%;height:150px;background:var(--canvas-bg);border-radius:6px;display:block}

.attrib3d{position:absolute;left:6px;bottom:4px;background:#ffffffd0;color:#222;font-size:11px;line-height:16px;padding:0 3px 0 5px;border-radius:3px;max-width:calc(100% - 12px);z-index:2;display:flex;align-items:center;gap:2px}
.attrib3d.sat{font-size:12px;line-height:17px}   /* Esri: provider credit at least 12 px while imagery shows */
.attrib3d .aline,#attrib .aline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.attrib3d a,#attrib a{color:inherit;text-decoration:none}
.attrib3d a:hover,#attrib a:hover{text-decoration:underline}
.attrib3d .ainfo,#attrib .ainfo{border:0;background:none;padding:0 2px;font:inherit;cursor:pointer;color:#555;line-height:1}
.attrib3d.folded,#attrib.folded{padding:0 2px;background:#ffffffa8}
.attrib3d.folded .aline,#attrib.folded .aline{display:none}
.attrib3d .along{display:none}.attrib3d.wide .along{display:inline}.attrib3d.wide .ashort{display:none}
.attrib3d .apop,#attrib .apop{position:absolute;left:0;bottom:calc(100% + 4px);width:max-content;max-width:min(420px,calc(100vw - 40px));background:#fff;color:#222;font-size:12px;line-height:1.45;padding:6px 8px;border-radius:4px;box-shadow:0 2px 8px #0003;white-space:normal}
#viewwrap.m3d #attrib,#viewwrap.mcompare #attrib{display:none}

.good{color:#1e8e3e;font-weight:600}.bad{color:#c62828;font-weight:600}
/* C41 problems in the network · right-click menu (engineering-program mouse) */
.issuebadge{border:1px solid #e0a800;background:#fff8e1;color:#7a5200;border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer;box-shadow:0 1px 3px #0002}
.issuebadge.err{border-color:#d32f2f;background:#fdecea;color:#b71c1c}
.isshead{padding:6px 8px;font-size:12px;border-bottom:1px solid var(--panel-border)}
.isshead .btn{margin-top:4px}
.issi{padding:6px 8px;margin:3px 4px;border-radius:4px;border-left:4px solid #ccc;cursor:pointer;font-size:12px}
.issi:hover{background:var(--hover,#dbe8f7)}
.issi .btn{margin-top:4px}
.issi.iss-e{border-left-color:#d32f2f}.issi.iss-w{border-left-color:#e0a800}.issi.iss-i{border-left-color:#90a4ae}
.isslv{font-weight:600}.iss-e .isslv{color:#c62828}.iss-w .isslv{color:#8a6100}.iss-i .isslv{color:#607d8b}
.ctxmenu{position:fixed;z-index:1000;min-width:220px;max-width:360px;background:var(--panel-bg,#fff);color:inherit;border:1px solid var(--panel-border,#ccc);border-radius:6px;box-shadow:0 4px 14px #0003;padding:4px 0;font-size:12px}
.ctxi{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;cursor:pointer;white-space:nowrap;position:relative}
.ctxc{width:12px;text-align:center;color:var(--accent,#1e6ee6);font-weight:bold}
.ctxic{width:16px;height:16px;flex:none}
.ctxl{flex:1;overflow:hidden;text-overflow:ellipsis}
.ctxk{color:#888;font-size:11px;margin-left:12px}
.ctxsubm{display:none;position:absolute;left:100%;top:-5px;margin-left:-2px}
.ctxsub:hover>.ctxsubm{display:block}
.ctxmenu.subleft .ctxsubm{left:auto;right:100%;margin:0 -2px 0 0}
.propiss{margin:6px 0 8px;padding:6px 8px;border:1px solid #e0a800;background:#fff8e1;color:#5a3d00;border-radius:4px;font-size:12px}
.propiss-h{font-weight:bold;margin-bottom:2px}
.propiss-i{border-left:3px solid #e0a800;padding:2px 0 2px 6px;margin:4px 0}
.propiss-i.lv-error{border-left-color:#d32f2f}.propiss-i.lv-info{border-left-color:#90a4ae}
.propiss .btn{margin-top:3px}
#msglog a.logid{color:inherit;text-decoration:underline dotted;cursor:pointer}
.ctxi:hover{background:var(--hover,#dbe8f7)}
.ctxs{height:1px;margin:3px 0;background:var(--panel-border,#ddd)}
#props.flash{animation:propsflash 1.2s ease-out}
@keyframes propsflash{0%{box-shadow:inset 0 0 0 3px #1e6ee6}100%{box-shadow:inset 0 0 0 0 transparent}}
#attrib[hidden],.attrib3d[hidden],.apop[hidden]{display:none!important}
/* screen space (owner 26 Oct · Team U U4–U7) */
#app.ribfold #ribbon{display:none}
#app.ribfold.ribpeek #ribbon{display:flex;position:absolute;left:0;right:0;top:34px;z-index:30;box-shadow:0 6px 14px #0003}
#app{position:relative}
#msg.min{height:auto}#msg.min #msglog{display:none}
#msg.max{height:45vh}
#cmdline .msgsz{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 6px;font-size:12px;line-height:20px}
#cmdline .msgsz:hover{color:var(--text)}
#app.fullview #ribbon,#app.fullview #titlebar,#app.fullview #left,#app.fullview #right,#app.fullview #msg{display:none}
#app.fullview #main{grid-template-columns:1fr}   /* hidden side panels leave the grid too */
#app.fullview{grid-template-rows:1fr auto}   /* hidden rows leave the grid, so only the work area and the status bar remain */
.fullbtn{border:1px solid var(--panel-border);background:var(--panel-bg,#fff);border-radius:6px;height:26px;min-width:28px;cursor:pointer;font-size:14px;line-height:1}
.fullbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#legend.fold{padding:2px 8px}
#legend.fold .row{display:none}
#legend .lghead{cursor:pointer;display:block}
#legend.fold .lghead::after{content:" ▸";color:#777}
#legend:not(.fold) .lghead::after{content:" ▾";color:#777}


/* RP-1 right panel: two tabs "คุณสมบัติ | ผลลัพธ์" (meeting 27 Oct PROPERTIES_PANEL) — readable at 260 px, no horizontal scroll */
.rhead{padding:0 4px 0 0}
.rhead .dock-tabs{flex:1;border-bottom:0;align-self:stretch}
.rhead .dock-tabs button{padding:6px 2px}
.livedot{color:#c62828;font-size:10.5px;font-weight:600}
.res .livehead{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.res .livehead b{font-size:15px;font-variant-numeric:tabular-nums}
.res .warmbar{position:relative;height:6px;background:var(--panel-border);border-radius:3px;margin:2px 0 6px;overflow:hidden}
.res .warmbar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.res .warmbar u{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,#0002 0 3px,transparent 3px 6px)}
.live2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}
.live2>div{border:1px solid var(--panel-border);border-radius:6px;padding:3px 6px;min-width:0}
.live2 small{display:block;color:var(--muted);font-size:11px;line-height:1.25;white-space:normal}
.live2 b{font-size:16px;font-variant-numeric:tabular-nums}
.live2 .u{font-size:11px;color:var(--muted);margin-left:2px}
.spark{display:block;width:100%;height:34px;margin:2px 0}
.watch a{display:block;padding:2px 0;line-height:1.35;white-space:normal}
.res .stale,.stale{opacity:.55;filter:grayscale(1)}
.runnote{background:#d4a01722;border:1px solid #d4a017;border-radius:6px;padding:3px 6px;margin:2px 0 6px;font-size:12px}
.lostrip{display:flex;height:12px;border-radius:3px;overflow:hidden;margin:3px 0}
.lostrip span{display:block;height:100%}
.rhead .dock-tabs button{color:var(--dock-head-fg);opacity:.72;font-weight:500;border-bottom:2px solid transparent}
.rhead .dock-tabs button.active{opacity:1;font-weight:700;border-bottom-color:var(--accent);color:var(--dock-head-fg)}
.rhead .livedot{color:#ff8a80}
.lvlchk{display:flex;align-items:center;gap:3px;font-size:11.5px;white-space:nowrap;margin-top:2px;cursor:pointer}
.nw{white-space:nowrap}
.loslab{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:11px;margin:1px 0 4px}
.loslab i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.live2 .u{white-space:nowrap}
.rhead .dock-tabs button{opacity:.88}
.rhead .dock-tabs button.active{opacity:1}

/* RP-2: compact live tables in the results tab (fit 260 px, Thai labels wrap, numbers right-aligned) */
table.mini { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11.5px; margin: 2px 0 6px; }
table.mini th, table.mini td { padding: 2px 3px; border-bottom: 1px solid var(--line, #e3e6ea); vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
table.mini th { font-weight: 600; color: var(--muted, #667); }
table.mini th:first-child, table.mini td:first-child { width: 52%; }
table.mini .r { text-align: right; }

/* message zone views (meeting 26 Oct res. 3 · kickoff 3 Nov): switch at the end of the command line, views in #mzview */
.mzsw{display:flex;gap:2px;align-items:center;padding:0 4px;border-left:1px solid var(--panel-border)}
.mzsw button{border:1px solid transparent;background:transparent;color:var(--muted);font-size:11.5px;padding:1px 6px;border-radius:4px;cursor:pointer;white-space:nowrap}
.mzsw button:hover{border-color:var(--panel-border)}
.mzsw button.on{background:var(--accent-weak,#e3ecfb);color:var(--fg,#123);border-color:var(--panel-border)}
#mzview{flex:1;overflow:auto;padding:4px 8px;font-size:12px;min-height:0}
#mzview .mzh{font-weight:600;margin:2px 0 4px}
#mzview .mzgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px;margin-bottom:6px}
#mzview .mzc{border:1px solid var(--panel-border);border-radius:5px;padding:3px 6px;line-height:1.25}
#mzview .mzc small{display:block;color:var(--muted)} #mzview .mzc b{font-size:15px} #mzview .mzc .u{margin-left:3px;color:var(--muted);font-size:11px}
#mzview .mzfind{margin:0;padding-left:20px} #mzview .mzfind li{margin:1px 0}
#mzview .mzev div{padding:1px 0;border-bottom:1px dotted var(--panel-border)}
#mzview .mztabs{display:inline-flex;gap:2px;margin:0 8px 4px 0} #mzview .mztabs button{font-size:11.5px;padding:1px 7px;border:1px solid var(--panel-border);background:transparent;border-radius:4px;cursor:pointer}
#mzview .mztabs button.on{background:var(--accent-weak,#e3ecfb)}
#mzview .mztable table.grid{font-size:11.5px} #mzview tr.mzrow{cursor:pointer} #mzview tr.mzrow:hover td{background:var(--accent-weak,#e3ecfb)}
#mzview .mzcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px} #mzview .chartbox{height:150px} #mzview .mzcharts h4{grid-column:1/-1;margin:4px 0 0}
#msg.max #mzview .chartbox{height:260px}
.btn.mini{padding:0 6px;font-size:11px}
/* smart assembly panel (C48 · RP-3): grey italic = the standard value · orange + ↺ = the user's own · red ⚠ = below the standard */
.props.asm .agrp{border-top:1px solid var(--line,#ddd);margin-top:6px;padding-top:4px}
.props.asm .ah{font-weight:600;font-size:12px;margin:2px 0 3px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.props.asm .af{display:grid;grid-template-columns:minmax(0,1fr) 66px 16px 44px;align-items:center;gap:3px;margin:1px 0;font-size:12px}
.props.asm .af .al{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.props.asm .af input[type=number],.props.asm .af input[type=text],.props.asm .af select{width:100%;min-width:0;box-sizing:border-box;font-size:12px}
.props.asm .af input[type=text],.props.asm .af select{grid-column:2/5}
.props.asm .af input[type=text]~i,.props.asm .af input[type=text]~.au,.props.asm .af select~.au{display:none}
.props.asm .af select~.rs{display:none}
.props.asm .af input[type=checkbox]{justify-self:start}
.props.asm .af .au{font-size:11px;color:#777;white-space:nowrap;overflow:hidden}
.props.asm .af.std input,.props.asm .af.std select{font-style:italic;color:#6b7280}
.props.asm .af.usr input,.props.asm .af.usr select{color:#c25e00;border-color:#ff9a3c;font-weight:600}
.props.asm .af.bad input,.props.asm .af.bad select{color:#c62828;border-color:#d32f2f;font-weight:600}
.props.asm .rs{border:0;background:none;color:#c25e00;cursor:pointer;padding:0;font-size:13px;line-height:1}
.props.asm .aw{color:#d32f2f;font-style:normal}
.props.asm .aiss{font-size:12px;margin:2px 0;color:#8a1c1c}.props.asm .aiss.warn{color:#8a5a00}
.props.asm .aov{font-size:12px;margin:2px 0}
.props.asm .anote{margin-top:6px}
.props.asm .kstd{font-style:italic;color:#6b7280}.props.asm .kusr{color:#c25e00;font-weight:600}.props.asm .kbad{color:#c62828;font-weight:600}
.props.asm fieldset.afs{border:0;margin:0;padding:0;min-width:0}
#toolhint.bad{background:#fdecea;color:#b71c1c;border-color:#d32f2f}
.props.asm .af.plain input{color:inherit}
.props.asm .awhy{font-size:11px;color:#b71c1c;margin:0 0 4px 4px;line-height:1.3}
.props.asm .alegend{margin:4px 0 2px}
.props.asm .alegend span{white-space:nowrap}
/* parts library (C48 stage 3): search on top, shortcuts, 8 categories; a smart assembly with a thumbnail drawn by the model's code */
.libsearch{padding:4px 6px;position:sticky;top:0;background:var(--panel,#fff);z-index:1}.libsearch input{width:100%;box-sizing:border-box}
.libcat .lcat{cursor:pointer;user-select:none}.libsub{font-size:11px;color:#666;margin:4px 8px 1px;font-weight:600}
.lrow{cursor:pointer}.lrow .lline{display:flex;align-items:center;gap:6px}.lrow .lname{flex:1;min-width:0;font-size:12px;line-height:1.35}
.lrow .lthumb{width:44px;height:44px;flex:none;border:1px solid #ddd;border-radius:4px;background:#f4f4f2}
.lrow .lico .ic{width:22px;height:22px}.lrow.smart{border-left:3px solid #ff7a00}
.lfav{border:0;background:none;cursor:pointer;font-size:15px;color:#bbb;padding:0 2px;flex:none}.lfav.on{color:#f5a400}
.lnone{padding:2px 10px 4px}.tag.smart{background:#fff1e0;color:#b45300;border-color:#ffc58a}
#main{position:relative}#main.leftfloat #left{position:absolute;left:0;top:0;bottom:0;width:290px;z-index:40;box-shadow:4px 0 14px rgba(0,0,0,.25);display:flex;flex-direction:column;background:var(--dock-bg)}
/* an absolutely placed child leaves the grid and the others slide one column left (map 0 px) — pin them while the library floats */
#main.leftfloat #center{grid-column:2;grid-row:1}#main.leftfloat #right{grid-column:3;grid-row:1}
.libsearch{display:flex;gap:4px;align-items:center}.lclear{border:0;background:none;font-size:16px;cursor:pointer;color:#777;padding:0 4px}.lleg{padding:0 8px 4px}
/* the panel body has 4 px top padding: a sticky box at top:0 let rows show above it — stick over the padding, with the panel colour */
.libsearch{top:-4px;margin-top:-4px;padding-top:8px;background:var(--dock-bg)}
.lfoot{border-top:1px solid var(--panel-border);margin-top:8px;padding-top:6px}
.props.asm .aok{color:#2e7d32}

/* turning check (C50 · 17c item 2b): one chip per vehicle — green pass · orange squeeze · red fail; tap = its sweep on the plan */
.props.asm .vchips{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0 4px}
.props.asm .vchip{border:1px solid #bbb;background:#fff;border-radius:10px;padding:1px 7px;font-size:11px;cursor:pointer;line-height:1.5}
.props.asm .vchip.pass{border-color:#2e7d32;color:#1b5e20}.props.asm .vchip.squeeze{border-color:#ef8f00;color:#8a5a00;background:#fff6e5}.props.asm .vchip.fail{border-color:#d32f2f;color:#b71c1c;background:#fdecea}
.props.asm .vchip.on{box-shadow:0 0 0 2px #1976d2}
.props.asm .aiss.info{color:#1b5e20}
.props.asm .vwhy{font-size:12px;margin:4px 0;padding:4px 6px;border-left:3px solid #2e7d32;background:#f3f8f3}.props.asm .vwhy.squeeze{border-color:#ef8f00;background:#fff6e5}.props.asm .vwhy.fail{border-color:#d32f2f;background:#fdecea}
.props.asm .vwhy div{margin:1px 0}.props.asm .vwhy div span{display:inline-block;min-width:78px;color:#555;font-weight:600}
.props.asm .vleg{margin-bottom:3px}
.props.asm .af .al{white-space:normal;line-height:1.15}   /* labels wrap to two lines (Team U 2c: truncated) */