* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #f4f5f7; color: #1c2733; }
.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 1.5rem; margin-bottom: 16px; }
h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.hidden { display: none !important; }
.hint { color: #5c6b7a; font-size: .85rem; }
.tag { font-size: .75rem; background: #e2e8f0; border-radius: 10px; padding: 2px 10px; vertical-align: middle; }

/* Distortion-proof, mirroring the SPA's TopBar (frontend/app/src/styles.css): the row
   NEVER wraps, crumbs take flex:1/min-width:0 and scroll horizontally when a deep path
   outgrows a phone, and Log out stays pinned.
   Before this, both flex items refused to shrink - the breadcrumb selects (up to four:
   tower/floor/flat/room) and the "<email> [Log out]" form - so on a phone the form
   overflowed the bar. That widens the DOCUMENT, which is why every server-rendered page
   below it gained a horizontal scroll and rendered shifted left. The SPA screens were
   already immune; only these Jinja pages were left on the old rule. */
.topbar { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; background: #16283c; color: #fff; padding: 10px 16px; }
.topbar a { color: #9fc3ea; text-decoration: none; }
.topbar form { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar .user { font-size: .85rem; color: #cbd8e4;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* min-width:0 is what lets this shrink below its widest <select>; a flex item otherwise
   never goes below min-content and pushes the whole row wider than the viewport. */
.crumbs { font-size: .95rem; display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs > a { flex-shrink: 0; }

/* Breadcrumb quick-switch (templates/_breadcrumbs.html): each hierarchy level is a
   <select> of its siblings - one tap to any sibling tower/floor/flat/room. */
.qnav { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qnav-sep { color: #5f7690; }
.qnav-select {
  background: #223a52; color: #cbd8e4; border: 1px solid #3a5470; border-radius: 6px;
  padding: 4px 6px; font-size: .85rem; max-width: 9.5rem; min-width: 0; cursor: pointer;
}
.qnav-select:focus { outline: 2px solid #9fc3ea; outline-offset: 1px; }

/* Phone portrait: four selects plus a full email cannot share one row at 390px. The
   email is the least useful thing on the bar - the surveyor knows who they are logged
   in as - so it goes first, keeping navigation and Log out on screen. */
@media (max-width: 600px) {
  .topbar { padding: 8px 12px; }
  .topbar .user { display: none; }
  /* Taller than the desktop rule: these are the primary navigation control on a phone
     and get tapped with a thumb, often gloved. */
  .qnav-select { max-width: 7.5rem; padding: 9px 8px; }
  .crumbs { font-size: .9rem; gap: 5px; }
}

.btn { display: inline-block; background: #2264a5; color: #fff; border: 0; border-radius: 6px;
  padding: 9px 18px; font-size: .95rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: #1b5187; }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: #8fa8bd; cursor: wait; }
.btn-ghost { background: transparent; color: #2264a5; border: 1px solid #2264a5; }
.topbar .btn-ghost { color: #cbd8e4; border-color: #4a627c; }
.alert { background: #fbe3e3; border: 1px solid #e08a8a; color: #7c1f1f;
  border-radius: 6px; padding: 10px 14px; margin: 10px 0; }

/* Live progress bar for the long pipeline requests (progress.js). */
.pbar { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
  margin: 10px 0 4px; max-width: 560px; }
.pbar-fill { height: 100%; width: 0; background: #2264a5; border-radius: 999px;
  transition: width .9s ease; }
/* While live, a moving sheen shows activity even when the % holds (GPU cold start). */
.pbar-live .pbar-fill { background: linear-gradient(90deg, #2264a5 30%, #4b8ecb 50%, #2264a5 70%);
  background-size: 200% 100%; animation: pbar-sheen 1.6s linear infinite; }
@keyframes pbar-sheen { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pbar-live .pbar-fill { animation: none; } }

.login-box { max-width: 380px; margin: 9vh auto; background: #fff; border-radius: 10px;
  padding: 28px; box-shadow: 0 2px 14px rgba(20,40,60,.08); }
.login-box .sub { color: #5c6b7a; margin-bottom: 16px; }
.login-box label { display: block; margin: 12px 0; font-size: .9rem; }
.login-box input { width: 100%; padding: 9px 10px; margin-top: 4px;
  border: 1px solid #c6d0da; border-radius: 6px; font-size: .95rem; }
.login-box .btn { width: 100%; margin-top: 14px; }
.login-box .hint { display: block; margin-top: 10px; text-align: center; }

/* The towers -> floors -> flats hierarchy pages moved to the React SPA in the
   migration (frontend/app/src/screens/, styled by app/src/styles.css). Their old
   server-rendered styles - .card*, .chip*, .bldg*, .tower-*, .floor-*, .unit-*,
   .corridor, .legend-swatch, .step-hint - lived on here for pages that no longer
   exist. Removed; this file now serves ONLY the Jinja pages: base, room, login,
   error and the breadcrumbs. */


.plan-wrap { position: relative; margin-top: 14px; background: #fff; border: 1px solid #c6d0da;
  border-radius: 8px; overflow: hidden; }
.plan-wrap img { display: block; width: 100%; height: auto; }
.plan-wrap svg { position: absolute; inset: 0; }
.plan-wrap svg rect { cursor: pointer; }
.plan-wrap svg rect:hover { fill-opacity: .45; }
.plan-crop img { width: auto; }

.room-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 800px) { .room-layout { grid-template-columns: 1fr; } }

.room-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

/* Phone portrait: the plan crop plus the category and entity lists routinely exceed one
   screen, which pushed "Begin survey" below the fold. Pin the actions to the bottom of
   the viewport so the primary action is always one thumb-reach away. */
@media (max-width: 800px) {
  .room-actions {
    position: sticky; bottom: 0; z-index: 30;
    margin: 14px -16px 0;              /* bleed past .page's 16px padding */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(244, 245, 247, .96);
    border-top: 1px solid #d5dde5;
    backdrop-filter: blur(6px);
  }
  .room-actions .btn { min-height: 48px; display: flex; align-items: center;
    justify-content: center; }
  .room-actions .btn-primary-action { flex: 2; font-size: 1rem; font-weight: 600; }
  .room-actions .btn-ghost { flex: 1; background: #fff; }
}

.cat-list { list-style: none; margin: 6px 0; }
.cat-list li { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.cat-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; background: #888; }

.ent-list { list-style: none; margin: 6px 0; padding: 0; }
/* Row height is a touch target, not just text: the surveyor cross-checks these against
   the plan badges with a thumb, so :active gives the same feedback :hover gives a mouse. */
.ent-list li { display: flex; align-items: center; gap: 7px; margin: 3px 0;
  padding: 9px 8px; border-radius: 6px; font-size: .9rem; cursor: default;
  -webkit-tap-highlight-color: transparent; transition: background .12s; }
.ent-list li:hover, .ent-list li:active { background: #eef2f6; }
.ent-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #888; color: #fff;
  font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.ent-tag { font-family: ui-monospace, monospace; font-weight: 600; }
.ent-arrow { color: #9aa7b4; }