/* The Building section: the plan as the page (DESIGN 5.1). The tool strip is
   down the left edge of the surface, the status line along its bottom, and
   the canvas takes everything else.

   index.html links this sheet. What this section asks of the shell's own
   layout element and of its messages (the plan goes edge to edge, the toast
   moves clear of the strip) is in ui/app.css, with the shell's other rules. */

.bld {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 320px;
  background: var(--paper);
}

/* until this sheet has loaded the plan has no size worth drawing at */
.bld[data-styled="false"] {
  visibility: hidden;
}

/* ---------- The tool strip ---------- */

.bld-strip {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: var(--s-1);
  background: var(--card);
  border-right: var(--border);
  overflow-y: auto;
}

.bld-tool {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: var(--s-1) 0;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink);
}

.bld-tool:hover {
  background: var(--accent-soft);
}

.bld-tool[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.bld-tool:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

.bld-tool[aria-pressed="true"]:focus-visible {
  outline-color: var(--accent-ink);
  box-shadow: 0 0 0 var(--focus-width) var(--accent);
}

.bld-tool__label {
  font-family: var(--font-plan);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  line-height: var(--lh-xs);
}

.bld-tool__key {
  position: absolute;
  top: 2px;
  right: 4px;
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-variant-numeric: var(--numeric);
  line-height: 1;
}

.bld-tool[aria-pressed="true"] .bld-tool__key {
  color: var(--accent-ink);
}

.bld-strip__divider {
  flex: none;
  height: 1px;
  margin: var(--s-1) var(--s-1);
  background: var(--line);
}

/* ---------- The plan ---------- */

.bld-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container: bld-stage / size;
}

.bld-plan {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bld-plan[data-panning="true"] {
  cursor: grabbing !important;
}

.bld-plan:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

/* ---------- The empty floor ---------- */

.bld-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30rem, calc(100% - var(--s-5) * 2));
  max-height: calc(100% - var(--s-4) * 2);
  padding: var(--s-5);
  overflow: auto;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-2);
}

/* The card sits over the middle of the plan, and the first corridor may well
   start there: only its buttons take the pointer, the rest lets it through
   to the plan, and the card goes the moment a drawing starts. */
.bld-empty {
  pointer-events: none;
}

.bld-empty button {
  pointer-events: auto;
}

.bld-empty .intro__headline {
  margin: 0;
}

.bld-empty .intro__first {
  margin: var(--s-2) 0 0;
}

.bld-empty__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* A plan too short for the whole card (a phone with the inspector's sheet
   open) keeps the sentence and drops the buttons, rather than cut either in
   half; shorter still, the card waits until there is room. */
@container bld-stage (max-height: 300px) {
  .bld-empty__actions {
    display: none;
  }
}

@container bld-stage (max-height: 130px) {
  .bld-empty {
    display: none;
  }
}

/* ---------- The status line ---------- */

.bld-status {
  --row: calc(var(--t-sm) * var(--lh-sm));
  grid-column: 2;
  grid-row: 2;
  container-type: inline-size;
  padding: var(--s-1) var(--s-3);
  background: var(--card);
  border-top: var(--border);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-variant-numeric: var(--numeric);
  line-height: var(--lh-sm);
}

.bld-status__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "hint hint hint"
    "cell counts zoom";
  align-items: center;
  gap: var(--s-1) var(--s-4);
}

.bld-status p {
  margin: 0;
}

/* The status line never changes height as the tool, the pointer or the
   counts change: each part has its lines, however many words are in it. A
   plan that fits the window would otherwise shift under the pointer. */

/* what a click will do, in full */
.bld-status__hint {
  grid-area: hint;
  height: var(--row);
  overflow: hidden;
  color: var(--ink);
}

/* the cell under the pointer comes and goes; its place is always kept */
.bld-status__cell {
  grid-area: cell;
  height: var(--row);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bld-status__counts {
  grid-area: counts;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  height: var(--row);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  white-space: nowrap;
}

/* narrower than the counts and the cell side by side: the counts get a line of their own */
@container (max-width: 1000px) {
  .bld-status__in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "hint hint"
      "counts counts"
      "cell zoom";
  }
}

@container (max-width: 760px) {
  .bld-status__hint {
    height: calc(var(--row) * 2);
  }
}

/* A phone: three lines for what a click will do (the longest hint needs
   them at 390 px), then one row. The counts are in few words beside the zoom
   buttons, and give their place to the cell under the finger while there is
   one. */
@container (max-width: 480px) {
  .bld-status__hint {
    height: calc(var(--row) * 3);
  }

  .bld-status__in {
    grid-template-areas:
      "hint hint"
      "info zoom";
    gap: var(--s-1) var(--s-3);
  }

  .bld-status__cell,
  .bld-status__counts {
    grid-area: info;
  }

  .bld-status__cell {
    align-self: center;
  }

  .bld-status__counts {
    align-content: center;
    height: calc(var(--row) * 2);
    white-space: normal;
  }

  .bld-status__cell:not(:empty) + .bld-status__counts {
    visibility: hidden;
  }

  /* the long words stay for a screen reader; the short ones are shown */
  .bld-status__counts li {
    font-size: 0;
  }

  .bld-status__counts li::before {
    content: attr(data-short);
    font-size: var(--t-sm);
  }

  .bld-status__zoom-value {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.bld-status__zoom {
  grid-area: zoom;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.bld-status__zoom-value {
  min-width: 3.25rem;
  text-align: center;
  color: var(--ink);
}

.bld-status__btn {
  min-width: 28px;
  height: 28px;
  padding: 0 var(--s-2);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--card);
  color: var(--ink);
  font-weight: var(--w-medium);
  line-height: 1;
}

.bld-status__btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- The floor tabs, in the top bar's second row ---------- */

.bld-floors {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  min-width: 0;
}

.bld-floors__list {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
}

.bld-floors__tab {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-2);
  font-weight: var(--w-medium);
  white-space: nowrap;
}

.bld-floors__tab:hover {
  color: var(--ink);
  background: var(--accent-soft);
}

.bld-floors__tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.bld-floors__tab:focus-visible,
.bld-floors__add:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}

.bld-floors__badge {
  min-width: 1.25rem;
  padding: 0 var(--s-1);
  border: var(--border-width) solid var(--problem);
  border-radius: var(--r-1);
  color: var(--problem);
  font-size: var(--t-xs);
  font-variant-numeric: var(--numeric);
  font-weight: var(--w-semibold);
  line-height: 1.4;
  text-align: center;
}

.bld-floors__add {
  flex: none;
  align-self: center;
  width: 28px;
  height: 28px;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-lg);
  line-height: 1;
}

.bld-floors__add:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ---------- The inspector, as far as it goes yet ---------- */

.bld-inspector {
  padding: var(--s-3) var(--s-4) var(--s-5);
}

.bld-inspector__panel > * + * {
  margin-top: var(--s-3);
}

.bld-inspector__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  line-height: var(--lh-lg);
  overflow-wrap: anywhere;
}

.bld-inspector p {
  margin-bottom: 0;
}

.bld-inspector__small {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

/* ---------- Narrower and shorter windows ---------- */

/* A window too short for eleven tools in one column: two columns, so none
   is below the fold. */
@media (min-width: 641px) and (max-height: 760px) {
  .bld {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .bld-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }

  .bld-strip__divider {
    grid-column: 1 / -1;
  }
}

/* A phone: the tools are two rows across the top, under the floor tabs, all
   eleven on screen; the plan has everything between them and the status
   line. */
@media (max-width: 640px) {
  .bld {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
  }

  .bld-strip {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 2px;
    border-right: 0;
    border-bottom: var(--border);
    overflow: visible;
  }

  .bld-strip__divider {
    display: none;
  }

  .bld-tool {
    min-height: 44px;
    padding: 2px 0;
  }

  .bld-stage {
    grid-column: 1;
    grid-row: 2;
  }

  .bld-status {
    grid-column: 1;
    grid-row: 3;
    padding: var(--s-1) var(--s-2);
  }

  /* the empty floor's card, small enough for the plan it sits on */
  .bld-empty {
    width: calc(100% - var(--s-3) * 2);
    max-height: calc(100% - var(--s-2) * 2);
    padding: var(--s-3);
  }

  .bld-empty .intro__headline {
    font-size: var(--t-lg);
    line-height: var(--lh-lg);
  }

  .bld-empty .intro__first {
    margin-top: var(--s-1);
    font-size: var(--t-md);
    line-height: var(--lh-md);
  }

  .bld-empty__actions {
    gap: var(--s-1);
    margin-top: var(--s-3);
  }

  .bld-empty .btn {
    line-height: var(--lh-sm);
  }
}

/* A finger needs more room than a pointer. */
@media (pointer: coarse) {
  .bld-tool {
    min-height: 52px;
  }

  @media (max-width: 640px) {
    .bld-tool {
      min-height: 44px;
    }
  }

  .bld-floors__tab {
    min-height: 44px;
  }

  .bld-floors__add,
  .bld-status__btn {
    min-width: 44px;
    width: auto;
    height: 44px;
  }
}

@media print {
  .bld-strip,
  .bld-status,
  .bld-empty {
    display: none;
  }
}