/* BimCraft browser UI — three columns: file panel | model stage | properties.
 * Tokens only (paper/model aware); hierarchy by line weight; no shadows. */

.bc {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 21rem;
  height: 100%;
  min-height: 0;
}

/* ---- Panels ---- */
.bc-panel { overflow-y: auto; min-height: 0; background: var(--sheet-2); }
.bc-left { border-right: var(--pen-2) solid var(--ink); }
.bc-right { border-left: var(--pen-2) solid var(--ink); }
.bc-sec { padding: 1rem; border-bottom: var(--pen-1) solid var(--line); }
.bc-sec:last-child { border-bottom: 0; }
.bc-h { font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; margin: 0 0 .65rem; }
.bc-muted, .bc-note { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.bc-note { margin-top: .65rem; display: flex; gap: .4rem; align-items: baseline; }

.bc-drop {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: 1.1rem .75rem;
  text-align: center;
  border: var(--pen-2) dashed var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.bc-drop:hover, .bc-drop:focus-within { border-style: solid; background: var(--sheet); }
.bc-drop:focus-within { outline: var(--pen-3) solid var(--action); outline-offset: 2px; }
.bc-drop .bi { font-size: 1.5rem; color: var(--layer); }
.bc-drop-main { font-weight: 700; }
.bc-drop-sub { font-size: var(--fs-sm); color: var(--ink-2); }

.bc-dl { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: .3rem .75rem; margin: 0; font-size: var(--fs-sm); }
.bc-dl dt { color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }
.bc-dl dd { margin: 0; overflow-wrap: anywhere; }

.bc-checks, .bc-counts { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.bc-checks li + li, .bc-counts li + li { border-top: var(--pen-1) solid var(--grid); }
.bc-checks label { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; cursor: pointer; }
.bc-checks input { accent-color: var(--action); width: 1rem; height: 1rem; }
.bc-checks .n, .bc-counts .n { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bc-counts li { display: flex; gap: .5rem; padding: .3rem 0; }

/* ---- Stage ---- */
.bc-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sheet); }
.bc-canvas { position: absolute; inset: 0; }
.bc-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.bc-toolbar {
  position: absolute;
  z-index: 2;
  top: .75rem;
  left: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
}
.bc-tool {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-right: var(--pen-1) solid var(--line);
  cursor: pointer;
}
.bc-tool:last-child { border-right: 0; }
.bc-tool:hover { background: var(--sheet); }
.bc-tool:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -3px; }
.bc-tool[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.bc-tool-sep { width: var(--pen-2); background: var(--ink); }

.bc-status {
  position: absolute;
  z-index: 2;
  left: .75rem;
  bottom: .75rem;
  margin: 0;
  max-width: calc(100% - 1.5rem);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.bc-status:not(:empty) { padding: .3rem .6rem; background: var(--sheet-2); border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.bc-status.is-error { border-color: var(--layer-red); color: var(--layer-red); font-weight: 600; }

.bc-empty {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 3vw, 4rem);
  background-image:
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}
.bc-empty-h { font-size: var(--fs-2xl); margin: 0 0 .5rem; }
.bc-empty-lede { font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 1.75rem; }
.bc-formats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; border-top: var(--pen-2) solid var(--ink); }
.bc-formats li { padding-top: 1rem; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; }
.bc-formats li + li { border-top: var(--pen-1) solid var(--line); }
.bc-formats p { margin: 0; }
.bc-fmt-name { font-weight: 700; font-stretch: 112%; color: var(--layer); }
.bc-noscript { margin-top: 1.5rem; font-weight: 600; }

.bc-dropveil {
  position: absolute;
  inset: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  border: var(--pen-3) dashed var(--action);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sheet) 85%, transparent);
  pointer-events: none;
}
.bc-dropveil p { margin: 0; font-size: var(--fs-lg); font-weight: 700; }

/* ---- RVT / RFA file card ---- */
.bc-card { position: absolute; inset: 0; overflow-y: auto; padding: clamp(1rem, .75rem + 2vw, 2.5rem); }
.bc-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-bottom: 1.25rem; border-bottom: var(--pen-2) solid var(--ink); }
.bc-card-preview { width: 12rem; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.bc-card-preview img { max-width: 100%; max-height: 100%; image-rendering: auto; }
.bc-card-preview .bc-muted { padding: 1rem; text-align: center; color: #34404E; }
.bc-card-kind { color: var(--layer); font-weight: 700; font-size: var(--fs-sm); margin: 0 0 .25rem; }
.bc-card h1 { font-size: var(--fs-xl); margin: 0 0 .35rem; overflow-wrap: anywhere; }
.bc-card-sub { color: var(--ink-2); margin: 0; }
.bc-card-note { margin: 1.25rem 0 0; padding: .75rem 1rem; border: var(--pen-1) dashed var(--ink); border-radius: var(--radius); background: var(--sheet-2); }
.bc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2rem; }
.bc-card-sec { padding: 1.25rem 0 0; }
.bc-card-sec h2 { font-size: var(--fs-base); font-weight: 700; font-stretch: 112%; margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: var(--pen-1) solid var(--line); }
.bc-card table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bc-card th, .bc-card td { text-align: left; vertical-align: top; padding: .3rem .75rem .3rem 0; border-bottom: var(--pen-1) solid var(--grid); overflow-wrap: anywhere; }
.bc-card th { color: var(--ink-2); font-weight: 500; width: 40%; }

/* ---- Properties ---- */
.bc-prop-cls { color: var(--layer); font-weight: 700; font-size: var(--fs-sm); margin: 0; }
.bc-prop-name { font-size: var(--fs-md); font-weight: 700; margin: .1rem 0 .75rem; overflow-wrap: anywhere; }
.bc-set { border-top: var(--pen-1) solid var(--line); }
.bc-set summary { padding: .45rem 0; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.bc-set .bc-dl { padding-bottom: .6rem; }

/* ---- Narrow screens: stage on top, panels below ---- */
@media (max-width: 960px) {
  .bc { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .bc-stage { order: -1; height: 62vh; min-height: 22rem; border-bottom: var(--pen-2) solid var(--ink); }
  .bc-left, .bc-right { border: 0; overflow: visible; }
  .bc-right { border-top: var(--pen-2) solid var(--ink); }
  .bc-formats li { grid-template-columns: 1fr; gap: .25rem; }
  .bc-card-head { grid-template-columns: 1fr; }
}
@media (max-width: 960px) and (min-width: 600px) {
  .bc { grid-template-columns: 1fr 1fr; }
  .bc-stage { grid-column: 1 / -1; }
  .bc-right { border-top: 0; border-left: var(--pen-2) solid var(--ink); }
}