/* Chrome added around the plan editor by the Django project page.
   It borrows the editor's own colour tokens, so it follows the light/dark theme. */
/* the project name, edited in place: a pencil and a dashed outline say so */
#bar .pe-name{
  display: inline-flex; align-items: center; gap: 1px; padding-left: 7px; cursor: text;
  border: 1px dashed var(--rule); border-radius: 5px; background: transparent;
}
#bar .pe-name:hover{ border-color: var(--accent); background: var(--field); }
#bar .pe-name:focus-within{ border: 1px solid var(--accent); background: var(--field); }
#bar .pe-name-ic{
  width: 13px; height: 13px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
#bar #peNameIn{
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: transparent; border: 0; border-radius: 5px;
  padding: 4px 7px 4px 5px; width: 180px; min-width: 100px; outline: none;
}

#bar #peStatus{
  font-size: 11.5px; color: var(--muted); white-space: nowrap; padding: 0 2px;
}
#bar #peStatus.ok{ color: var(--ok); }
#bar #peStatus.warnish{ color: var(--accent); }
#bar #peStatus.bad{ color: var(--danger); }

#bar #peSave{ background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#bar #peSave:hover{ filter: brightness(1.08); }

#peSaveForm, #peNewForm{ display: none; }

@media (max-width: 860px){
  #bar #peNameIn{ width: 120px; }
  #bar #peStatus{ display: none; }
}

/* ---- public editor: the sign-up gate on save and export -------------------
   Only ever rendered on /floor-plan-maker/, where there is no project to save
   into. Uses the tool's own tokens so it follows its light/dark theme. */
#bar .pe-locked{ position: relative; opacity: .72; }
#bar .pe-locked::after{
  content: "·"; font-size: 15px; line-height: 1; color: var(--accent);
  margin-left: 1px; font-weight: 700;
}
#bar .pe-locked:hover{ opacity: 1; }

.pe-gate{
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(20, 22, 24, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pe-gate[hidden]{ display: none; }
.pe-gate-card{
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 26px 28px; width: min(430px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  text-align: left;
}
.pe-gate-card h2{
  margin: 0 0 10px; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
}
.pe-gate-card h2 #peGateWhat{ color: var(--accent); white-space: nowrap; }
.pe-gate-card > p{ margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pe-gate-actions{ display: flex; gap: 9px; flex-wrap: wrap; }
.pe-gate-actions .btn{ flex: 1 1 auto; justify-content: center; text-decoration: none; }
.pe-gate-close{
  display: block; width: 100%; margin: 14px 0 0; padding: 6px;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.pe-gate-close:hover{ color: var(--ink); }
.pe-gate-note{
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted); text-align: center;
}

@media (max-width: 520px){
  .pe-gate-card{ padding: 22px 20px; }
  .pe-gate-card h2 #peGateWhat{ white-space: normal; }
}

/* The tool styles .btn assuming a <button>: it sets background and border but
   leaves colour to inherit, so an <a class="btn"> falls back to the browser's
   link blue and underline. Both the toolbar links ("← Projects", "← Home") and
   the gate's actions are anchors, so pin the colour for all of them. */
#bar a.btn, #bar a.btn:visited,
.pe-gate a.btn, .pe-gate a.btn:visited{
  color: var(--ink); text-decoration: none;
}
#bar a.btn.primary, #bar a.btn.primary:visited,
.pe-gate a.btn.primary, .pe-gate a.btn.primary:visited{
  color: var(--panel);
}

/* ---- inside the mobile app's WebView (/m/editor/, mobile-bridge.js) --------
   The app's native header carries the name, Save and Export, so the toolbar
   stays one row that scrolls sideways instead of wrapping.
   That row is wider than a phone, so the scroll has to be visible: a scrollbar
   that stays on screen, plus ‹ › buttons over a fade at whichever edge has more
   controls past it (mobile-bridge.js wraps #bar in .pe-barwrap for those). */
.pe-embed #bar{
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  padding-bottom: 6px;
}
/* The phone layout turns .spacer into a full-width row break; in one row it is
   just a screen of blank space before Reset. */
.pe-embed #bar .spacer{ display: none; }
.pe-embed #bar::-webkit-scrollbar{ display: block; height: 5px; }
.pe-embed #bar::-webkit-scrollbar-track{ background: var(--panel2); border-radius: 3px; margin: 0 12px; }
.pe-embed #bar::-webkit-scrollbar-thumb{ background: var(--muted); border-radius: 3px; }
.pe-embed #bar > *{ flex-shrink: 0; }

.pe-barwrap{ position: relative; flex: none; }
.pe-barnav{
  position: absolute; top: 0; bottom: 6px; width: 40px; z-index: 5;
  display: flex; align-items: center; border: 0; padding: 0;
  font: 700 22px/1 var(--sans); color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pe-barnav.left{ left: 0; justify-content: flex-start; padding-left: 6px;
  background: linear-gradient(to right, var(--panel) 45%, transparent); }
.pe-barnav.right{ right: 0; justify-content: flex-end; padding-right: 6px;
  background: linear-gradient(to left, var(--panel) 45%, transparent); }
.pe-barnav.on{ opacity: 1; pointer-events: auto; }

/* "Edit <name>" and "Remove" for the selection (smaller on a wide screen), at the foot of the
   drawing just above the hint line (mobile-panels.js; website and app alike). */
#peEditChip{
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: stretch; gap: 8px; max-width: calc(100% - 24px);
}
#peEditChip[hidden], #peEditChip [hidden]{ display: none; }
#peEditChip button{
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 40px;
  padding: 9px 16px; border-radius: 999px; font: 700 13px/1.2 var(--sans);
  box-shadow: 0 4px 14px rgba(0,0,0,.22); touch-action: manipulation; cursor: pointer;
}
#peEditChip .pe-ec-edit{ border: 0; background: var(--accent); color: #fff; }
#peEditChip .pe-ec-del{ flex: none; border: 1px solid var(--bad, #b3412c); background: var(--panel); color: var(--bad, #b3412c); }
#peEditChip .pe-ec-edit{ flex: 0 1 auto; }
#peEditChip .pe-ec-icon{ flex: none; justify-content: center; width: 40px; padding: 0; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
#peEditChip .pe-ec-count{ display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 700 13px/1.2 var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.22); white-space: nowrap; }
#peEditChip .pe-ec-count[hidden], #peEditChip .pe-ec-icon[hidden]{ display: none; }
#peEditChip .pe-ec-ic{ font-size: 14px; }
#peEditChip .pe-ec-tx{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#peEditChip button:active{ filter: brightness(.92); }
/* wide screens: the same bar, smaller, below the sheet */
#peEditChip.pe-ec-sm{ bottom: 40px; gap: 6px; }
#peEditChip.pe-ec-sm button{ min-height: 28px; padding: 5px 11px; gap: 5px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
#peEditChip.pe-ec-sm .pe-ec-ic{ font-size: 12px; }
#peEditChip.pe-ec-sm .pe-ec-icon{ width: 30px; padding: 0; }
#peEditChip.pe-ec-sm .pe-ec-count{ padding: 0 11px; font-size: 12px; }
#peEditChip.pe-ec-sm svg{ width: 13px; height: 13px; }
#peEditChip.pe-ec-sm button:hover{ filter: brightness(1.08); }

/* Rotate (portrait ⇄ landscape) beside the zoom read-out, top right of the
   drawing (mobile-panels.js). Touch screens and the app only. */
.pe-viewtools{
  position: absolute; right: 10px; top: 48px; z-index: 6;
  display: flex; align-items: center; gap: 6px;
}
.pe-viewtools #zoomRead{ position: static; }
.pe-rotate{
  display: none; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  font: 700 12px/1 var(--sans); touch-action: manipulation;
}
.pe-touch .pe-rotate, .pe-embed .pe-rotate{ display: inline-flex; }
.pe-rotate:active{ background: var(--panel2); }

/* The website's toolbar now carries Save project / 3D view / sign-up prompts on top of the tool's
   own buttons — more than one row holds even on a desktop. Wrap onto a second row rather than
   pushing Export, Reset and friends off the right edge behind a sideways scroll.
   (The app's embedded editor keeps its one scrolling row: see .pe-embed above.) */
html:not(.pe-embed) #bar{flex-wrap:wrap; overflow-x:visible; row-gap:6px}
#bar #peStatus{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- the guided tour (editor-tour.js) -------------------------------------
   A dimmed page with a lit outline round the control being explained, and one
   card beside it. Clicks outside the card are caught, so nothing moves under it. */
.tour-block{ position: fixed; inset: 0; z-index: 4500; background: transparent; }
.tour-spot{
  position: fixed; z-index: 4501; pointer-events: none; border-radius: 7px;
  border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(10, 14, 18, .55);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.tour-card{
  position: fixed; z-index: 4502; width: min(330px, calc(100vw - 16px));
  background: var(--panel); color: var(--ink); border: 1px solid var(--accent);
  border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.tour-card::before{
  content: ""; position: absolute; left: calc(var(--arrow, 50%) - 7px); width: 12px; height: 12px;
  background: var(--panel); border: 1px solid var(--accent); transform: rotate(45deg); display: none;
}
.tour-card.down::before{ display: block; top: -7px; border-right: 0; border-bottom: 0; }
.tour-card.up::before{ display: block; bottom: -7px; border-left: 0; border-top: 0; }
.tour-count{ font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tour-card h3{ margin: 3px 0 5px; font-size: 16px; }
.tour-card p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tour-foot{ display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tour-dots{ flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.tour-dots i{ width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.tour-dots i.on{ background: var(--accent); }
.tour-next{
  background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 7px 18px;
  font: 700 13px var(--sans); cursor: pointer;
}
.tour-next:hover{ filter: brightness(1.08); }
.tour-next:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .tour-spot{ transition: none; } }

/* ---- the selection's menu (editor-extras.js): right-click, or ⋯ on the selection bar ---- */
.pe-menu{
  position: fixed; z-index: 4000; min-width: 190px; max-width: calc(100vw - 16px); padding: 5px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); display: flex; flex-direction: column;
}
.pe-menu-hd{ padding: 6px 10px 5px; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-menu button{ background: none; border: 0; border-radius: 5px; padding: 9px 10px; text-align: left; font: 500 13px var(--sans); color: var(--ink); cursor: pointer; }
.pe-menu button:hover, .pe-menu button:focus-visible{ background: var(--panel2); outline: none; }
.pe-menu button.danger{ color: var(--bad, #b3412c); }

/* press and hold a button on a touch screen: what it does (editor-extras.js) */
.pe-tip{
  position: fixed; z-index: 4100; max-width: min(280px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 6px;
  background: var(--ink); color: var(--panel); font: 500 12.5px/1.45 var(--sans); box-shadow: 0 8px 22px rgba(0,0,0,.3); pointer-events: none;
}
.pe-touch #bar .btn, .pe-embed #bar .btn{ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---- resizing the docked panels (editor-extras.js) ---- */
.pe-rsz{ position: absolute; z-index: 30; touch-action: none; }
.pe-rsz[hidden]{ display: none; }
.pe-rsz-x{ top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.pe-rsz-x::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s; }
.pe-rsz-x:hover::after, .pe-resizing .pe-rsz-x:active::after{ background: var(--accent); }
.pe-resizing, .pe-resizing *{ user-select: none !important; }
.pe-resizing .pe-rsz-x, .pe-resizing #paper{ cursor: col-resize; }
@media (max-width:1000px){ .pe-rsz-x{ display: none; } }
/* the panels never scroll sideways: what is in them fits their width (the drag stops at the narrowest that fits) */
#lib, #insp{ overflow-x: hidden; }
#lib .chip{ min-width: 0; overflow-wrap: anywhere; }