/*
 * components.css — base appearance for Blockwork components.
 *
 * This stylesheet is shared by three places so a component looks identical
 * everywhere:
 *   1. the designer canvas (the static preview),
 *   2. the live preview iframe (Milestone 5),
 *   3. the exported PWA (Milestone 8).
 *
 * Components add their per-instance look (colours, sizes) as inline styles from
 * their properties; this file only provides the sensible defaults that inline
 * styles override. It must not depend on the editor theme (tokens.css) — these
 * styles ship inside student apps.
 */

.bw-screen {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: #111827;
  overflow-x: hidden; /* never bleed sideways past the phone frame */
  /* A column, so children can fill the screen height (Height = fill). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*
 * Resolve a "fill" dimension based on the parent's direction:
 *   • in a row    → fill width makes the 3 columns equal (see grid below)
 *   • in a column → fill height SHARES; fill width stretches to full width
 * min-width/min-height: 0 lets shared items shrink instead of overflowing.
 */
.bw-harrange > .bw-fill-w { justify-self: stretch; min-width: 0; }
.bw-harrange > .bw-fill-h { align-self: stretch; height: auto; }
.bw-varrange > .bw-fill-h,
.bw-screen   > .bw-fill-h { flex: 1 1 0; min-height: 0; }
.bw-varrange > .bw-fill-w,
.bw-screen   > .bw-fill-w { width: 100%; align-self: stretch; }
/* The screen is the single vertical scroll container; horizontal is clipped. */
.bw-screen[data-scrollable="false"] { overflow-y: hidden; }
.bw-screen[data-scrollable="true"] { overflow-y: auto; }

.bw-button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 4px 0;
}
.bw-button:disabled { opacity: 0.5; cursor: not-allowed; }

.bw-label {
  display: block;
  margin: 4px 0;
  white-space: pre-wrap; /* preserve line breaks set from blocks */
}

.bw-textbox {
  font: inherit;
  box-sizing: border-box;
  width: 100%;
  margin: 4px 0;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.bw-image { display: block; margin: 4px 0; max-width: 100%; object-fit: contain; }
.bw-image-empty {
  display: grid; place-items: center;
  background: #f1f5f9; color: #94a3b8;
  border: 1px dashed #cbd5e1; border-radius: 6px;
  font: 13px system-ui, sans-serif;
}

/* Arrangements (layout containers) */
.bw-arrange { gap: 6px; margin: 4px 0; min-height: 24px; max-width: 100%; box-sizing: border-box; }

/*
 * Horizontal: a grid of up to 3 columns. Children flow left-to-right and wrap
 * to a new row after 3, so a row never overflows the phone. The block responds
 * to AlignHorizontal (justify-content) and AlignVertical (align-items), set
 * inline by the component. Columns are content-sized by default; if any child
 * is set to Width = fill, the 3 columns become equal instead.
 */
.bw-harrange {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: start;
}
.bw-harrange:has(> .bw-fill-w) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Vertical stays a flex column. */
.bw-varrange { display: flex; flex-direction: column; }

/* Notifier overlays (alert / choice / toast) */
.bw-notify-overlay {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / 0.4);
  display: grid; place-items: center;
  z-index: 1000;
}
.bw-notify-card {
  background: #fff; color: #111827;
  border-radius: 12px; padding: 20px;
  max-width: 80%; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
}
.bw-notify-text { margin: 0 0 16px; }
.bw-notify-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bw-notify-btn {
  font: inherit; cursor: pointer;
  border: none; border-radius: 6px;
  padding: 8px 14px; background: #2563eb; color: #fff;
}
.bw-notify-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: rgb(17 24 39 / 0.92); color: #fff;
  padding: 10px 16px; border-radius: 999px; font-size: 14px;
  z-index: 1000; max-width: 80%;
}

/* Switch (toggle) */
.bw-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 46px; height: 26px; margin: 4px 0; cursor: pointer; vertical-align: middle;
}
.bw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bw-switch-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; }
.bw-switch-track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform .15s;
}
.bw-switch input:checked + .bw-switch-track { background: var(--bw-switch-color, #2563eb); }
.bw-switch input:checked + .bw-switch-track::before { transform: translateX(20px); }
.bw-switch input:disabled + .bw-switch-track { opacity: .5; }

/* Slider */
.bw-slider { width: 100%; margin: 8px 0; }

/* Gauge */
.bw-gauge { display: block; width: 160px; max-width: 100%; margin: 4px 0; }
.bw-gauge-svg { width: 100%; height: auto; }
.bw-gauge-value { font: 700 18px system-ui, sans-serif; fill: #111827; }
.bw-gauge-label { font: 11px system-ui, sans-serif; fill: #6b7280; }

/* Line chart */
.bw-chart { display: block; width: 100%; margin: 4px 0; }
.bw-chart-svg { width: 100%; height: auto; background: #f8fafc; border-radius: 6px; }
.bw-chart-empty { font: 11px system-ui, sans-serif; fill: #9ca3af; }

/* Component placeholder rendering in the designer when a render fails. */
.bw-error {
  border: 1px dashed #ef4444;
  color: #ef4444;
  padding: 4px 8px;
  font: 12px/1.4 monospace;
}