/* Blender 101 — iPad / PWA adjustments layered over the original design.
   The workbook's own styles are inline; these rules only tune touch,
   safe areas and the standalone (Home Screen) app. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Keep content clear of rounded corners and the Home indicator. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overscroll-behavior-y: none;
}

#dc-root main {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

/* Lesson list rows on the overview are grid buttons inside a plain block, so
   they shrink to their content; stretch them so dividers and the status
   column line up, as designed. */
#dc-root main button[style*="grid-template-columns: 52px"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

button, label, a, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* no double-tap-zoom delay on taps */
}

button, label {
  -webkit-user-select: none;
  user-select: none; /* a Pencil tap shouldn't start a text selection */
}

textarea, input {
  -webkit-user-select: text;
  user-select: text;
}

:focus-visible {
  outline: 2px solid var(--accent, #0A62D0);
  outline-offset: 2px;
}

/* Touch screens (iPad with finger or Apple Pencil) */
@media (pointer: coarse) {
  /* 16px+ stops iPadOS zooming the page when a field is focused. */
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    font-size: 16px !important;
  }

  /* Roomier writing areas for Scribble / handwriting with Apple Pencil. */
  textarea { min-height: 92px; }

  input[type="checkbox"] {
    width: 26px !important;
    height: 26px !important;
  }

  /* Step circles are drawn at 26px; give them a 44px hit area. */
  button[aria-label="Mark step done"] { position: relative; }
  button[aria-label="Mark step done"]::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  /* Lesson tabs and segmented controls: comfortable 40px+ targets. */
  header nav button { min-height: 40px; }
  [role="group"] button { min-height: 36px; }

  /* Checklist rows */
  label:has(> input[type="checkbox"]) { min-height: 44px; }
}

/* Update banner (added by js/pwa.js) */
.b101-toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: var(--ink, #1D1D1F);
  color: var(--bg, #F5F5F7);
  font: 500 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.b101-toast button {
  border: 0;
  cursor: pointer;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 14px/1 inherit;
  font-family: inherit;
  background: var(--accent, #0A62D0);
  color: #fff;
}
.b101-toast button.b101-toast-dismiss { background: transparent; color: inherit; opacity: 0.7; }

/* Shown only when content/hosting.json points to a different address. */
.b101-moved {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: calc(10px + env(safe-area-inset-top)) 20px 12px;
  background: #FFF4D6;
  color: #3A2600;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.b101-moved p { margin: 0; flex: 1 1 320px; }
.b101-moved a { flex: none; padding: 9px 14px; border-radius: 10px; background: #3A2600; color: #FFF4D6; font-weight: 600; text-decoration: none; }

@media print {
  .b101-toast, .b101-moved { display: none !important; }
}