/* 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. */
#bar #peNameIn{
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  padding: 4px 7px; width: 190px; min-width: 110px;
}
#bar #peNameIn:hover{ border-color: var(--rule); background: var(--field); }
#bar #peNameIn:focus{ border-color: var(--accent); background: var(--field); 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);
}