/* ==========================================================================
   SortFlow — warehouse blueprint planner for Parcel Simulator
   Design system + app shell.  Dark "control-room" theme by default,
   light "blueprint" theme via [data-theme="light"].
   Fan-made; not affiliated with Dansan Digital / Parcel Simulator.
   ========================================================================== */

:root {
  /* Brand palette — pulled from the game's world */
  --amber:#D4A843;   --amber-2:#D4A843;  --amber-ink:#D4A843;
  --tan:#D3A15E;     --green:#46C46A;    --blue:#5AA9E6;    --red:#C2453C;

  /* Surfaces / ink (dark) */
  --ground:#0F0F12;  --panel:#1A1A1E;    --panel-2:#26262C; --raise:#2F2F35;
  --line:#000000;    --line-2:#2A2A30;
  --ink:#E8E8E8;     --ink-2:#B4B4B8;    --ink-3:#8A8A8E;

  /* Canvas */
  --grid:rgba(255,255,255,.05);  --grid-2:rgba(255,255,255,.1);
  --cell:30px;                    /* driven by zoom */
  --stripe:repeating-linear-gradient(45deg,#D4A843 0 14px,#151518 14px 28px);
  --shadow:0 22px 55px -22px rgba(0,0,0,.7);

  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sidebar-w:264px;  --inspector-w:252px;  --topbar-h:96px;
  --r:4px;
}


:root[data-theme="light"] {
  --amber-ink:#7E6224;
  --ground:#EAE5D8;  --panel:#F5F1E7;    --panel-2:#FBF8F0; --raise:#FFFFFF;
  --line:#D8CFBB;    --line-2:#C4B99F;
  --ink:#202023;     --ink-2:#626262;    --ink-3:#8C8574;
  --grid:rgba(40,55,90,.08);      --grid-2:rgba(40,55,90,.15);
  --stripe:repeating-linear-gradient(45deg,#C99A35 0 14px,#efe9db 14px 28px);
  --shadow:0 22px 55px -26px rgba(60,50,20,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font-family:inherit}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ---- App frame: sidebar | main | inspector ------------------------------ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr var(--inspector-w);
  grid-template-rows:var(--topbar-h) 1fr auto;
  grid-template-areas:
    "side  top    top"
    "side  canvas insp"
    "side  foot   foot";
  height:100vh;
}

/* =============================== SIDEBAR ================================== */
.side{
  grid-area:side; background:linear-gradient(180deg,#242427 0%,var(--panel-2) 32%); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.brand{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.brand .mark{width:42px;height:42px;flex:0 0 auto}
.brand .word{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.01em}
.brand .word b{color:var(--amber-ink)}
.brand .word .sim{color:var(--ink-3);font-weight:400;font-size:12px}

.side-scroll{flex:1; overflow-y:auto; padding:12px; min-height:0}
.side-scroll::-webkit-scrollbar{width:9px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;
  border:2px solid var(--panel-2)}
.catalog-tabs{display:flex;gap:5px;overflow-x:auto;padding:11px 12px 8px;border-bottom:1px solid var(--line);scrollbar-width:none;background:linear-gradient(180deg,rgba(212,168,67,.07),transparent)}
.catalog-tabs::-webkit-scrollbar{display:none}
.catalog-tab{height:32px;min-width:35px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink-2);cursor:pointer;white-space:nowrap;font:700 10px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.catalog-tab svg{width:15px;height:15px}.catalog-tab:hover{border-color:var(--line-2);color:var(--ink)}.catalog-tab.on{border-color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 12%,var(--panel));color:var(--amber-ink)}
.catalog-rail-head{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;padding:10px 12px 5px;color:var(--ink-2);font:700 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}.catalog-rail-head span{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-rail-head b{display:block;color:var(--ink);font:700 11px var(--mono);letter-spacing:.09em}.catalog-rail-head small{display:block;margin-top:2px;color:var(--amber-ink);font:600 9px var(--sans);letter-spacing:0;text-transform:none}.catalog-step{width:27px;height:27px;border-radius:4px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}.catalog-step:hover{border-color:var(--amber-ink);color:var(--amber-ink)}
.catalog-now{position:relative;display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;margin:0 12px 10px;padding:10px;border:1px solid color-mix(in srgb,var(--amber) 48%,var(--line));border-radius:4px;background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 18%,var(--panel)),var(--panel-2) 72%);overflow:hidden}.catalog-now:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 55%,rgba(212,168,67,.13));pointer-events:none}.catalog-now-icon{position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--amber-ink);border-radius:4px;background:var(--ground);color:var(--amber-ink);box-shadow:inset 0 0 20px rgba(212,168,67,.12)}.catalog-now-icon svg{width:36px;height:36px}.catalog-now-copy{position:relative;z-index:1;min-width:0}.catalog-now-copy span{display:block;color:var(--amber-ink);font:700 8px var(--mono);letter-spacing:.13em;text-transform:uppercase}.catalog-now-copy b{display:block;margin:2px 0;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.catalog-now-copy small{display:block;color:var(--ink-3);font:9px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.catalog-now-state{position:absolute;right:8px;bottom:5px;color:var(--amber-ink);font:700 8px var(--mono);letter-spacing:.13em}
.catalog-rail{display:flex;gap:8px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:3px 12px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin;background:linear-gradient(180deg,transparent,var(--panel))}.catalog-rail::-webkit-scrollbar{height:9px;width:auto}.catalog-rail .part{display:grid;grid-template-rows:40px auto;justify-items:center;align-content:start;gap:5px;flex:0 0 88px;min-height:86px;margin:0;padding:8px 5px;text-align:center;scroll-snap-align:center;background:var(--panel);border-radius:4px}.catalog-rail .part:hover{transform:translateY(-2px);border-color:var(--line-2)}.catalog-rail .part.active{background:linear-gradient(160deg,color-mix(in srgb,var(--amber) 22%,var(--panel)),var(--raise));box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 35%,transparent)}.catalog-rail .part .tile{width:40px;height:40px;border-radius:4px;border:1px solid var(--line-2);background:var(--ground)}.catalog-rail .part.active .tile{border-color:var(--amber-ink);color:var(--amber-ink)!important}.catalog-rail .part .tile svg{width:25px;height:25px}.catalog-rail .part .nm{font-size:10px;line-height:1.15;max-height:24px;overflow:hidden}.catalog-rail .part .pr{display:none}.catalog-rail .grp{display:contents}.catalog-rail .grp-h{display:none}

.grp{margin-bottom:16px}
.grp-h{
  display:flex; align-items:center; gap:8px; margin:0 2px 9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2); font-weight:600;
}
.side-module{position:relative}.side-module.dragging{opacity:.4}.side-module.drop-before:before{content:"";position:absolute;left:0;right:0;top:-6px;height:3px;border-radius:3px;background:var(--amber);box-shadow:0 0 12px rgba(212,168,67,.65)}
.drag-handle{width:18px;height:18px;display:grid;place-items:center;margin:-2px 0 -2px -3px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ink-3);font-size:15px;line-height:1;cursor:grab}.drag-handle:hover{background:var(--raise);color:var(--amber-ink)}.drag-handle:active{cursor:grabbing}
.shortcut-list{display:grid;gap:5px;padding:8px 9px;border:1px dashed var(--line-2);border-radius:4px;color:var(--ink-2);font-size:10px}.shortcut-list span{display:flex;align-items:center;gap:4px}.shortcut-list b{min-width:18px;padding:1px 3px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:700 9px var(--mono);text-align:center}
.grp-h .ic{width:15px;height:15px;color:var(--amber-ink);flex:0 0 auto}

.part{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 9px; margin-bottom:7px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  color:var(--ink); transition:transform .08s, border-color .08s;
}
.part:hover{border-color:var(--amber-ink); transform:translateY(-1px)}
.part.active{border-color:var(--amber); box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 30%,transparent)}
.part.locked{opacity:.42; filter:grayscale(.75)}
.part.locked:hover{border-color:var(--line); transform:none; cursor:not-allowed}
.part.locked .pr{color:var(--amber-ink); font-weight:600}
.part .tile{
  width:28px;height:28px;border-radius:4px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--raise);
}
.part .tile svg{width:17px;height:17px}
.part-symbol{display:grid;place-items:center;min-width:70%;height:70%;font:800 17px/1 var(--mono);letter-spacing:-.12em;text-shadow:0 1px 0 rgba(0,0,0,.55)}
.part .tile.art{overflow:hidden;background:#0E0E11}.part .tile.art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.05)}
.part .nm{font-size:13px;font-weight:600;line-height:1.15}
.part .pr{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* Steam CTA pinned to sidebar bottom */
.steam-cta{
  margin:12px; padding:13px; border-radius:4px; display:block;
  border:1px solid var(--amber-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 15%,transparent),transparent);
}
.steam-cta .t{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
.steam-cta .g{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px}
.steam-cta .g svg{width:17px;height:17px;flex:0 0 auto}
.steam-cta .b{margin-top:9px;text-align:center;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--amber);color:#0F0F12;padding:8px;border-radius:4px}
.steam-cta:hover .b{background:var(--amber-2)}

/* =============================== TOP BAR ================================= */
.top{
  grid-area:top; display:flex; flex-wrap:wrap; align-content:stretch; gap:0; padding:0;
  background:var(--panel); border-bottom:1px solid var(--line); overflow:hidden;
}
.planner-product{height:38px; width:100%; display:flex; align-items:center; gap:18px; padding:0 15px;
  background:#151518; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.planner-product-brand{display:flex;align-items:center;gap:7px;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:-.02em;text-transform:none}
.planner-product-brand span{color:var(--amber);font-size:13px;letter-spacing:-6px;margin-right:5px}.planner-product-brand b{color:var(--amber-ink)}
.planner-product nav{display:flex;gap:14px}.planner-product nav a:hover{color:var(--amber-ink)}
.planner-product-title{margin-left:auto;color:var(--ink-2)}.planner-product-title b{color:var(--amber-ink)}
.sf-language-picker{position:relative;z-index:50}.sf-language-trigger{display:flex;align-items:center;gap:5px;height:27px;min-width:62px;padding:0 7px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:700 9px var(--mono);letter-spacing:.06em;cursor:pointer}.sf-language-trigger:hover,.sf-language-picker.open .sf-language-trigger{border-color:var(--amber-ink)}.sf-language-trigger:focus{outline:2px solid color-mix(in srgb,var(--amber) 55%,transparent);outline-offset:1px}.sf-language-flag{width:19px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}.sf-language-chevron{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.7}.sf-language-menu{position:absolute;right:0;top:calc(100% + 7px);display:none;width:196px;padding:5px;border:1px solid var(--line);border-radius:4px;background:var(--panel);box-shadow:0 16px 35px rgba(0,0,0,.5)}.sf-language-picker.open .sf-language-menu{display:block}.sf-language-option{display:flex;align-items:center;width:100%;gap:9px;padding:7px;border:0;border-radius:4px;background:transparent;color:var(--ink-2);text-align:left;font:600 11px var(--sans);cursor:pointer}.sf-language-option:hover,.sf-language-option[aria-checked="true"]{background:var(--raise);color:var(--ink)}.sf-language-option[aria-checked="true"]{box-shadow:inset 2px 0 0 var(--amber)}.sf-language-option small{margin-left:auto;color:var(--ink-3);font:700 9px var(--mono)}
.sf-language,.sf-language-picker{display:none!important}
.planner-commandbar{height:57px;width:100%;display:flex;align-items:center;gap:10px;padding:0 14px;min-width:0;
  background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 100%)}
.planner-version{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);flex:0 0 auto}
.planner-version a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px;color:var(--ink-2);white-space:nowrap}
.planner-version a:hover{color:var(--ink)}
.planner-version .version-stable{background:var(--raise);color:var(--ink)}
.planner-version small{display:none}
.wh-select{
  font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line); border-radius:4px; padding:7px 9px; cursor:pointer; flex-shrink:0;
}
.wh-select:hover{border-color:var(--amber-ink); color:var(--amber-ink)}
.tabs{display:flex; gap:4px; align-items:center}
.tab{
  font-family:var(--mono); font-size:12px; padding:7px 12px; border-radius:4px;
  color:var(--ink-2); border:1px solid transparent; cursor:pointer; background:transparent; line-height:1;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); background:var(--panel-2); border-color:var(--line)}

.tools{display:flex; gap:4px; margin-left:8px; min-width:0; flex-shrink:1; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.tools::-webkit-scrollbar{display:none}
.top .tool, .top .tool-div, .top .speed{flex-shrink:0}
.tool{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px; color:var(--ink-2);
}
.tool:hover{color:var(--ink); border-color:var(--line-2)}
.tool.on{color:var(--amber-ink); border-color:var(--amber-ink)}
.tool svg{width:17px;height:17px}
.zoom-tools{margin-left:2px;display:inline-flex;align-items:center;gap:3px;padding:3px;background:var(--ground);border:1px solid var(--line);border-radius:4px}
.zoom-tools .tool{width:27px;height:27px;border:0;background:transparent}.zoom-tools .tool.on{border:0}
.zoom-lvl{min-width:45px;text-align:center;font:700 10px var(--mono);color:var(--amber-ink);letter-spacing:.04em}

.hud{margin-left:auto; display:flex; gap:6px; flex-shrink:0}
.stat{
  display:flex; align-items:baseline; gap:6px; padding:6px 10px;
  border:1px solid var(--line); border-radius:4px; background:var(--panel-2);
}
.stat .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--mono);font-size:14px;font-weight:700}
.stat .v.amber{color:var(--amber-ink)} .stat .v.green{color:var(--green)} .stat .v.blue{color:var(--blue)}

.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px; flex-shrink:0;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2)}
.icon-btn svg{width:16px;height:16px}
.disabled-tool{display:inline-flex;cursor:not-allowed}
.disabled-tool .icon-btn[disabled]{opacity:.35;filter:grayscale(1);cursor:not-allowed;pointer-events:none}

/* =============================== CANVAS ================================== */
.canvas-wrap{
  grid-area:canvas; position:relative; overflow:auto; background:radial-gradient(circle at 50% 0,#313134 0,var(--panel-2) 44%,#19191C 100%);
}
.canvas-wrap::-webkit-scrollbar{width:11px;height:11px}
.canvas-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;border:3px solid var(--panel-2)}
.floor{
  position:relative; margin:26px; border:1px solid var(--line-2); border-radius:4px;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/var(--cell) var(--cell),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/var(--cell) var(--cell),
    linear-gradient(var(--grid-2) 1px,transparent 1px) 0 0/calc(var(--cell)*5) calc(var(--cell)*5),
    linear-gradient(90deg,var(--grid-2) 1px,transparent 1px) 0 0/calc(var(--cell)*5) calc(var(--cell)*5);
  cursor:crosshair;
}
.floor.erase{cursor:cell}
.floor-tag{
  position:absolute; top:-20px; left: 100px;; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
/* placed part */
.cellpart{
  position:absolute; width:var(--cell); height:var(--cell);
  display:grid; place-items:center;
}
.cellpart svg{width:64%;height:64%}
.cellpart .gl.symbol-art{font:800 calc(var(--cell) * .43)/1 var(--mono);letter-spacing:-.14em;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.cellpart .gl.image-art{overflow:hidden;border-radius:4px;padding:3px}.cellpart .gl.image-art img{width:100%;height:100%;display:block;object-fit:cover;border-radius:3px;opacity:.94;mix-blend-mode:screen}
.cellpart .bg{position:absolute; inset:2px; border-radius:4px; border:1px solid}
.cellpart .gl{position:relative; z-index:1; display:grid; place-items:center; width:100%; height:100%}

/* ghost preview under cursor */
.ghost{position:absolute; width:var(--cell); height:var(--cell); pointer-events:none;
  opacity:.5; display:grid; place-items:center}
.ghost svg{width:64%;height:64%}
.ghost .gl.symbol-art{font:800 calc(var(--cell) * .43)/1 var(--mono);letter-spacing:-.14em}
.ghost .gl.image-art{overflow:hidden;border-radius:4px;padding:3px}.ghost .gl.image-art img{width:100%;height:100%;object-fit:cover;border-radius:3px;opacity:.85}

/* =============================== INSPECTOR =============================== */
.insp{
  /* own grid column so it never covers the warehouse */
  grid-area:insp; align-self:stretch; width:var(--inspector-w); z-index:15;
  background:linear-gradient(180deg,#242427 0%,var(--panel-2) 45%);
  border-left:1px solid var(--line); box-shadow:-16px 0 34px -20px rgba(0,0,0,.65);
  padding:14px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; min-height:0;
}
body.inspector-collapsed .app{grid-template-columns:var(--sidebar-w) 1fr 0}
body.inspector-collapsed .insp{display:none}
.insp-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px}
.insp-module{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}.insp-module[hidden]{display:none!important}.insp-module.dragging{opacity:.45}.insp-module.drop-before:before{content:"";position:absolute;left:0;right:0;top:-8px;height:3px;border-radius:4px;background:var(--amber);box-shadow:0 0 12px rgba(212,168,67,.65)}
.insp-module .drag-handle{margin-left:-3px}.insp-title{position:relative;justify-content:flex-start;color:var(--ink)}.insp-title #btn-insp-close,.insp-panel-toggle{height:25px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink-2);font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.insp-title #btn-insp-close{margin-left:2px}.insp-panel-toggle{margin-left:auto}.insp-title #btn-insp-close:hover,.insp-panel-toggle:hover,.insp-panel-toggle[aria-expanded="true"]{color:var(--amber-ink);border-color:var(--amber-ink)}
.insp-panels{position:absolute;z-index:65;top:calc(100% + 8px);right:0;width:205px;padding:10px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);box-shadow:0 16px 36px rgba(0,0,0,.48);font-family:var(--sans);letter-spacing:normal;text-transform:none}.insp-panels[hidden]{display:none}.insp-panels>b{display:block;margin:0 0 7px;color:var(--ink);font:700 10px var(--mono);letter-spacing:.09em;text-transform:uppercase}.insp-panels label{display:flex;align-items:center;gap:7px;padding:6px 2px;color:var(--ink-2);font-size:11px;cursor:pointer}.insp-panels input{accent-color:var(--amber);width:14px;height:14px}.insp-panels button{width:100%;margin-top:8px;padding:7px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);color:var(--ink-2);font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.insp-panels button:hover{color:var(--amber-ink);border-color:var(--amber-ink)}
.inspector-fab{position:fixed;right:16px;top:calc(var(--topbar-h) + 15px);z-index:40;display:none;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);color:var(--ink-2);font:700 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--shadow);cursor:pointer}.inspector-fab svg{width:15px;height:15px}.inspector-fab:hover{color:var(--amber-ink);border-color:var(--amber-ink)}
body.inspector-collapsed .inspector-fab{display:flex;color:var(--amber-ink);border-color:var(--amber-ink)}
body.inspector-collapsed .inspector-fab span{font-size:0}body.inspector-collapsed .inspector-fab span:after{content:'Show inspector';font-size:10px}
.card{border:1px solid var(--line); border-radius:4px; background:var(--panel); padding:11px}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-2);font-family:var(--mono);font-size:11px}
.kv .v{font-family:var(--mono);font-weight:700}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatches .sw{width:25px;height:25px;border-radius:4px;border:1px solid var(--line-2);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2);background:var(--panel);transition:.12s}
.swatches .sw:hover{transform:translateY(-1px);border-color:var(--ink)}
.swatches .sw.pick{position:relative;overflow:hidden;
  background:conic-gradient(from 0deg,#C2453C,#D4A843,#46C46A,#5AA9E6,#9B8BD0,#C2453C)}
.swatches .sw.pick input{position:absolute;inset:-6px;width:200%;height:200%;opacity:0;cursor:pointer}
.appearance-note{margin:-1px 0 8px;color:var(--ink-2);font-size:11px;line-height:1.35}
.appearance-guide{display:grid;gap:4px;margin-top:12px;padding:9px;border:1px dashed var(--line-2);border-radius:4px;color:var(--ink-2);font-size:11px;line-height:1.35}.appearance-guide b{color:var(--ink);font-size:11px}.appearance-guide kbd,.appearance-empty kbd{padding:1px 4px;border:1px solid var(--line-2);border-radius:3px;background:var(--raise);color:var(--amber-ink);font:700 9px var(--mono)}
.appearance-empty{text-align:left;color:var(--ink-2);font-size:11px;line-height:1.4}.appearance-empty b{display:block;margin-top:9px;color:var(--ink);font-size:12px}.appearance-empty p{margin:4px 0 7px}.appearance-empty>span{font:700 10px var(--mono);letter-spacing:.04em;color:var(--amber-ink)}.appearance-empty__swatches{display:flex;gap:5px}.appearance-empty__swatches i{width:22px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.14)}.appearance-empty__swatches i:nth-child(1){background:#D4A843}.appearance-empty__swatches i:nth-child(2){background:#46C46A}.appearance-empty__swatches i:nth-child(3){background:#5AA9E6}.appearance-empty__swatches i:nth-child(4){background:#C2453C}.appearance-empty__swatches i:nth-child(5){background:conic-gradient(#C2453C,#D4A843,#46C46A,#5AA9E6,#9B8BD0,#C2453C)}
.val{display:flex;gap:9px;font-size:12px;padding:7px 0;align-items:flex-start}
.val svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.val.ok svg{color:var(--green)} .val.warn svg{color:var(--red)} .val.info svg{color:var(--blue)}
.val .t b{display:block;font-size:12px} .val .t span{color:var(--ink-2);font-size:11px}
.meter{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--amber),var(--green))}
.empty{color:var(--ink-3);font-size:12px;text-align:center;padding:14px 4px}

/* =============================== FOOTER ================================== */
.foot{
  grid-area:foot; border-top:1px solid var(--line); background:var(--panel);
  padding:9px 16px; display:flex; align-items:center; gap:14px;
  font-size:11.5px; color:var(--ink-2);
}
.import-panel{position:fixed;z-index:85;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 30px));
  background:var(--panel);border:1px solid var(--line-2);border-radius:4px;box-shadow:var(--shadow);overflow:hidden}
.import-panel[hidden]{display:none!important}.import-head{display:flex;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);font:700 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--amber-ink)}
.import-head button{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer}.import-body{padding:16px;color:var(--ink-2);font-size:13px}.import-body p{margin:0 0 14px}.import-body b{color:var(--ink)}
.import-drop{display:flex;align-items:center;justify-content:center;min-height:94px;border:1px dashed var(--line-2);border-radius:4px;color:var(--amber-ink);font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:var(--panel-2)}.import-drop input{display:none}.import-drop:hover{border-color:var(--amber-ink);background:var(--raise)}
.import-summary{display:grid;gap:8px;margin:0 0 14px}.import-summary .ir{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}.import-summary .ir b{font-family:var(--mono);color:var(--ink)}.import-warnings{margin:0 0 14px;padding:10px;border-left:3px solid var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--panel-2));font-size:12px}.import-actions{display:flex;gap:8px;justify-content:flex-end}.import-actions button{border:1px solid var(--line-2);border-radius:4px;padding:8px 11px;background:var(--panel-2);color:var(--ink);font:700 11px var(--mono);cursor:pointer}.import-actions .confirm{background:var(--amber);color:#111;border-color:var(--amber)}
.foot .disc{max-width:none}
.foot .disc b{color:var(--ink)}
.foot .sp{margin-left:auto; display:flex; gap:16px; font-family:var(--mono); font-size:11px}
.foot .sp a:hover{color:var(--amber-ink)}

.hazard{height:4px;background:var(--stripe);opacity:.8}

/* small helpers */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--raise); border:1px solid var(--line-2); border-radius:4px;
  padding:10px 16px; font-size:13px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* =============================== PHASE 1 ================================= */
/* toolbar divider */
.tool-div{width:1px;height:22px;background:var(--line);margin:0 3px;align-self:center}
.tool[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* multi-cell + selection + dead-end states on placed parts */
.cellpart{transition:none}
.cellpart.multi .gl svg{width:46%;height:46%}
.cellpart.sel .bg{outline:2px solid var(--amber);outline-offset:-1px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 30%,transparent)}
.cellpart.locked .bg{border-style:dashed}
.cellpart.locked::before{content:"";position:absolute;left:3px;bottom:3px;width:5px;height:5px;
  border:1px solid currentColor;border-radius:1px;opacity:.5}
.cellpart.de .bg{border-color:var(--red)!important;
  background:color-mix(in srgb,var(--red) 16%, transparent)!important}
.cellpart.de::after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;
  border-radius:50%;background:var(--red);box-shadow:0 0 7px var(--red)}

/* flow-direction arrows — triangles at each port edge, sized to the cell so
   they stay legible at every zoom. Inputs point inward (dim blue); outputs
   point outward in the part colour (green/red for scanner + diverter verdicts). */
.parrow{position:absolute;width:0;height:0;pointer-events:none;z-index:4;
  transform:translate(-50%,-50%) rotate(var(--ang,0deg));
  border-style:solid;
  border-width:calc(var(--cell) * .11) 0 calc(var(--cell) * .11) calc(var(--cell) * .17);
  border-color:transparent transparent transparent currentColor;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.parrow.in{color:#6BA6F0;opacity:.5}
.parrow.out{opacity:.95}
/* legacy dot pins (kept for any external callers) */
.pin{position:absolute;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;box-shadow:0 0 3px rgba(0,0,0,.4)}
.pin-in{background:#5B9EF4}
.pin-out{background:#46C46A}
/* inline hot-key hint chip used in the inspector */
.insp .hk,.hk{display:inline-block;min-width:14px;padding:0 4px;font-family:var(--mono);
  font-size:9.5px;line-height:14px;text-align:center;color:var(--ink-2);
  background:var(--raise);border:1px solid var(--line);border-radius:3px}

/* placement ghost — bad = blocked/out of bounds */
.ghost .bg{position:absolute;inset:2px;border-radius:4px;border:1px dashed var(--amber-ink)}
.ghost .gl{position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center}
.ghost.bad .bg{border-color:var(--red)}
.ghost.bad{opacity:.35}

/* marquee rectangle */
.marquee{position:absolute;border:1px solid var(--amber);border-radius:2px;
  background:color-mix(in srgb,var(--amber) 12%, transparent);pointer-events:none;z-index:5}

/* mezzanine "open to below" overlay — the missing half-width of the upper floor */
.mezz{position:absolute; pointer-events:none; z-index:6;
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb,var(--red) 9%,transparent) 0 14px, transparent 14px 28px),
    color-mix(in srgb, #0F0F12 34%, transparent);}
.mezz-line{position:absolute; left:0; right:0; top:0; height:7px;
  background:repeating-linear-gradient(45deg, var(--amber) 0 11px, #161619 11px 22px);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.4)}
.mezz-label{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font:700 11px/1 var(--mono); letter-spacing:.02em; color:var(--amber-ink); white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 92%,transparent); border:1px solid var(--amber-ink);
  padding:6px 10px; border-radius:4px; box-shadow:var(--shadow)}

/* doors — solid wall tabs (grown ~1.5×): upright icon(s) on top, a big flow-arrow bar under.
   Dual-purpose doors render two icons side by side, each getting its own space. */
.cellpart.door{z-index:8}
.cellpart.door .bg{opacity:1; inset:1px; border-width:1px; border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.45)}
.cellpart.door .gl.door-ic{position:absolute; left:3%; right:3%; top:3%; height:60%;
  display:flex; align-items:center; justify-content:center; gap:2%; color:#fff}
.cellpart.door .di{flex:1 1 0; min-width:0; height:100%; display:grid; place-items:center}
.cellpart.door .di svg{width:100%; height:96%; stroke-width:1.9}
.cellpart.door .dchip{position:absolute; left:5%; right:5%; bottom:5%; z-index:2;
  display:grid; place-items:center; font-weight:800; line-height:1; color:#fff;
  background:rgba(15,15,18,.88); border-radius:3px;
  height:29%; font-size:calc(var(--cell) * .42)}

/* country export doors — flag centered in the door square, direction shown as a
   compact corner badge (so the flag reads centred, not pushed to the top) */
.cellpart.door.country{cursor:pointer}
.cellpart.door.country .gl.door-ic{top:8%;bottom:8%;left:8%;right:8%;width:auto;height:auto}
.cellpart.door.country .di.flag{width:100%;height:100%}
.cellpart.door.country .di.flag svg{width:100%;height:100%;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cellpart.door.country .dchip{left:auto;right:7%;width:34%;bottom:7%;height:25%;font-size:calc(var(--cell) * .30)}
.cellpart.door.country:hover .bg{filter:brightness(1.12)}

/* country picker popover */
.country-picker{position:fixed;z-index:60;width:230px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:4px;
  box-shadow:var(--shadow);padding:10px}
.country-picker .cp-h{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:2px 2px 9px}
.country-picker .cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cp-item{display:flex;align-items:center;gap:7px;padding:6px;cursor:pointer;text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:4px;color:var(--ink)}
.cp-item:hover{border-color:var(--amber-ink)}
.cp-item.on{border-color:var(--amber);box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 30%,transparent)}
.cp-flag{flex:0 0 auto;width:26px;height:18px;border-radius:3px;overflow:hidden;display:block}
.cp-flag svg{width:100%;height:100%;display:block}
.cp-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* stairs up to the mezzanine (decorative marker) */
.stairs{position:absolute;z-index:5;display:grid;place-items:center;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 3px,var(--panel-2) 3px 7px);
  border:1px solid var(--line-2);border-radius:4px;
  font:700 calc(var(--cell) * .26) var(--mono);color:var(--ink-2);text-align:center;line-height:1.1}
.stairs span{background:color-mix(in srgb,var(--panel) 80%,transparent);padding:2px 3px;border-radius:3px}

/* coordinate rulers — sit in the margin outside the grid, never over cells */
.ruler{position:absolute; z-index:1; font:600 calc(var(--cell) * .26) var(--mono);
  color:var(--ink-2); pointer-events:none; white-space:nowrap}
.ruler.rx{top:calc(var(--cell) * -0.62); transform:translateX(-50%)}
.ruler.ry{left:-6px; transform:translateY(-50%) translateX(-100%)}

.insp-hint{margin-top:10px; padding:9px 10px; font-size:11.5px; line-height:1.45;
  color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line);
  border-left:3px solid var(--amber-ink); border-radius:4px}

/* non-buildable cut-out (e.g. WH1's L-shape) — masks the grid, shows the step walls */
.hole{position:absolute; background:var(--panel-2); pointer-events:none;
  border-top:2px solid var(--line-2); border-right:2px solid var(--line-2);
  border-top-right-radius:5px}

/* pan cursor */
.canvas-wrap.space{cursor:grab}
.canvas-wrap.panning{cursor:grabbing}
.floor.select{cursor:default}

/* minimap */
#minimap{display:block;width:100%;height:auto;border-radius:4px;background:var(--panel-2);
  cursor:pointer}

/* simulation: parcel overlay canvas */
.parcel-layer{position:absolute;left:0;top:0;pointer-events:none;z-index:6}

/* sim transport in the top bar */
.tool.play-on{color:var(--green);border-color:var(--green)}
.speed{display:flex;gap:2px;align-items:center;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;padding:2px;margin-left:2px}
.speed button{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);background:transparent;
  border:0;padding:5px 8px;border-radius:4px;cursor:pointer;line-height:1}
.speed button:hover{color:var(--ink)}
.speed button.on{background:var(--raise);color:var(--amber-ink)}

/* running badge on the floor */
.sim-flag{position:absolute;top:-22px;right:0;display:none;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sim-flag.on{display:inline-flex}
.sim-flag .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);
  animation:simpulse 1.1s ease-in-out infinite}
@keyframes simpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* shortcuts card */
.kbd-card{display:flex;flex-direction:column;gap:6px}
.kbd-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.kbd-row span{flex:1}
.kbd-row kbd{font-family:var(--mono);font-size:10px;color:var(--ink);background:var(--raise);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:2px 6px;line-height:1.4}

/* cloud layouts panel */
.cloud-panel{position:fixed; top:52px; right:14px; width:320px; max-height:70vh; z-index:70;
  background:var(--panel); border:1px solid var(--line-2); border-radius:4px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.cloud-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.cloud-head .cloud-user{margin-left:auto; color:var(--amber-ink); text-transform:none; letter-spacing:0}
.cloud-head #cloud-close{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:14px}
.cloud-head #cloud-close:hover{color:var(--ink)}
.cloud-save{display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.cloud-save input{flex:1 1 100%; background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
  color:var(--ink); padding:8px 10px; font-family:var(--sans); font-size:13px}
.cloud-save input:focus{outline:none; border-color:var(--amber-ink)}
.cloud-btn{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:4px; cursor:pointer; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink)}
.cloud-btn:hover{border-color:var(--amber-ink); color:var(--amber-ink)}
.cloud-btn.primary{background:var(--amber); color:#0F0F12; border-color:var(--amber)}
.cloud-btn.primary:hover{background:var(--amber-2); color:#0F0F12}
.cloud-list{overflow-y:auto; padding:8px}
.cloud-item{display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line);
  border-radius:4px; margin-bottom:7px; background:var(--panel-2)}
.cloud-item.on{border-color:var(--amber-ink)}
.cloud-item .ci-main{flex:1; min-width:0}
.cloud-item .ci-name{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cloud-item .ci-meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.cloud-item button{background:none; border:1px solid var(--line-2); border-radius:4px; color:var(--ink-2);
  cursor:pointer; padding:5px 8px; font-family:var(--mono); font-size:10.5px}
.cloud-item button:hover{color:var(--ink); border-color:var(--ink-2)}
.cloud-item button.del:hover{color:var(--red); border-color:var(--red)}
.cloud-empty{color:var(--ink-3); font-size:12px; text-align:center; padding:16px 6px}
.gallery-sort{margin-left:auto; display:flex; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:2px}
.gallery-sort button{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); background:transparent; border:0; padding:4px 8px; border-radius:4px; cursor:pointer; text-transform:none; letter-spacing:0}
.gallery-sort button.on{background:var(--raise); color:var(--amber-ink)}

/* read-only shared-view banner — sits below the top bar so it never covers the toolbar */
.share-banner{position:fixed; top:calc(var(--topbar-h) + 10px); left:50%; transform:translateX(-50%); z-index:75;
  display:flex; align-items:center; gap:12px; padding:9px 12px 9px 16px;
  background:var(--panel); border:1px solid var(--amber-ink); border-radius:4px; box-shadow:var(--shadow)}
/* the hidden attribute must win over the display:flex/block base rules above */
.cloud-panel[hidden], .share-banner[hidden]{display:none !important}
.report-panel[hidden]{display:none !important}
.report-panel{position:fixed; top:52px; right:14px; width:360px; max-height:74vh; z-index:70;
  background:var(--panel); border:1px solid var(--line-2); border-radius:4px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.report-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.report-head #report-copy{margin-left:auto}
.report-head #report-close{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:14px}
.report-head #report-close:hover{color:var(--ink)}
.report-body{overflow-y:auto; padding:14px; font-size:13px; line-height:1.45; display:flex; flex-direction:column; gap:14px}
.report-body h4{margin:0 0 6px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.report-body .row{display:flex; justify-content:space-between; gap:8px; padding:3px 0}
.report-body .row .k{color:var(--ink-3)}
.report-body .row .v{font-family:var(--mono); color:var(--ink)}
.report-body .tot{display:flex; justify-content:space-between; padding-top:6px; margin-top:6px; border-top:1px dashed var(--line); font-weight:700}
.report-body .tot .v, .report-body .tot .k{color:var(--amber-ink)}
.report-body .pt{display:flex; justify-content:space-between; gap:10px; padding:2px 0; font-size:12.5px}
.report-body .pt .n{color:var(--ink-3); font-family:var(--mono); white-space:nowrap}
.report-body .tag{display:inline-flex; padding:2px 8px; border-radius:4px; border:1px solid var(--line-2); font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.report-body .tag.ok{color:var(--green); border-color:color-mix(in srgb, var(--green) 50%, transparent)}
.report-body .tag.warn{color:var(--red); border-color:color-mix(in srgb, var(--red) 50%, transparent)}
.report-body .tag.info{color:var(--blue); border-color:color-mix(in srgb, var(--blue) 50%, transparent)}
.report-body .warn-note{color:var(--red); font-size:12px}
.share-banner .sb-info{font-size:13px; max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.share-banner .sb-author{color:var(--ink-2)}
body.readonly .tools, body.readonly .wh-select, body.readonly #btn-save, body.readonly #btn-cloud, body.readonly #btn-export-json, body.readonly #btn-import-json, body.readonly #btn-import-game, body.readonly #btn-report{display:none}
body.readonly .side .part{pointer-events:none; opacity:.5}
body.readonly .side-scroll{filter:saturate(.6)}

/* report-this-build form (shown from the shared-view banner) */
.report-form[hidden]{display:none !important}
.report-form{position:fixed; top:calc(var(--topbar-h) + 56px); right:14px; width:300px; z-index:78;
  background:var(--panel); border:1px solid var(--line-2); border-radius:4px; box-shadow:var(--shadow);
  padding:14px; display:flex; flex-direction:column; gap:10px}
.report-form .rf-head{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.report-form .rf-head #rf-close{margin-left:auto; background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:14px}
.report-form .rf-head #rf-close:hover{color:var(--ink)}
.report-form select, .report-form textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:4px; color:var(--ink);
  padding:8px 10px; font-family:var(--sans); font-size:13px}
.report-form textarea{resize:vertical; min-height:64px}
.report-form select:focus, .report-form textarea:focus{outline:none; border-color:var(--amber-ink)}
.report-form .rf-actions{display:flex; gap:8px; justify-content:flex-end}

@media (max-width:900px){
  :root{--topbar-h:96px}.app{grid-template-columns:1fr; grid-template-areas:"top" "canvas" "foot"}
  .side,.insp{display:none}
  .planner-product nav,.planner-product-title{display:none}.planner-product{gap:10px}.planner-product .sf-language-picker{margin-left:auto}
  .cloud-panel{right:2vw; left:2vw; width:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---- 3-cell parts, linked elevators, diverter routing (tickets #10-#12) ---- */
.cellpart.bridge{z-index:3}
.cellpart.bridge .bg{background:color-mix(in srgb, var(--amber) 8%, transparent) !important}
.cellpart.linked .bg{border-style:dashed !important}
.cellpart.linked .lift-badge{display:grid;place-items:center;font-size:calc(var(--cell) * .42);line-height:1;font-weight:700}
.cellpart.legacy .bg{border-style:dotted !important}
.cellpart .lift-dir{position:absolute;right:4px;top:3px;font:600 9px/1 var(--mono);letter-spacing:.08em;color:#B48BF0;pointer-events:none}
.cellpart .dflag,.ghost .dflag{position:absolute;width:calc(var(--cell) * .42);height:calc(var(--cell) * .28);transform:translate(-50%,-50%);
  border:1px solid rgba(0,0,0,.55);border-radius:2px;overflow:hidden;pointer-events:none;z-index:2}
.cellpart .dflag svg,.ghost .dflag svg{display:block;width:100%;height:100%}
.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.route-exit{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 8px;border:1px solid var(--line-2);
  border-radius:4px;background:var(--panel-2);color:var(--ink-2);cursor:pointer;text-align:left;font:inherit}
.route-exit:hover{border-color:var(--amber)}
.route-exit.set{color:var(--ink)}
.route-exit .re-lane{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.route-exit .re-val{display:flex;align-items:center;gap:6px;font-size:12px}
.route-exit .re-flag{display:inline-block;width:18px;height:12px;border:1px solid rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.route-exit .re-flag svg{display:block;width:100%;height:100%}
.route-end{display:flex;justify-content:space-between;margin:8px 0 6px;font-size:12px;color:var(--ink-2)}
.route-end b{color:#E8A33A;font-weight:600}
.seg-toggle{display:flex;gap:0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.seg-toggle button{flex:1;padding:7px 0;border:0;background:var(--panel-2);color:var(--ink-2);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.seg-toggle button.on{background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber-ink)}
.val-act{margin:4px 0 8px 26px;padding:6px 10px;border:1px solid var(--amber);border-radius:4px;background:var(--panel-2);color:var(--amber-ink);
  font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.val-act:hover{background:color-mix(in srgb, var(--amber) 18%, transparent)}
.country-picker .cp-none{grid-column:1 / -1;justify-content:center}