/* ------------------------------------------------------------------
   Upskill — code-side styles only.
   Layout/mobile rules live in Claude Design; this file holds the bits
   the design tool can't express (site scale, iOS quirks, injected feed).
   ------------------------------------------------------------------ */

/* Desktop-only site scale. Scoped above the 820px breakpoint so it cannot
   shift the responsive layouts. Change 0.9 to resize the desktop site. */
@media (min-width: 1024px) {
  html { zoom: 0.9; }
}

/* Instagram field-notes cards (injected from the Behold feed) */
.ig-card { transition: box-shadow .2s ease, transform .2s ease; }
.ig-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* iOS Safari paints <button> text in its system blue via an inherited
   -webkit-text-fill-color, which overrides `color` on child elements.
   Must be reset on the button AND its descendants. */
button {
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font-family: inherit;
  -webkit-text-fill-color: currentColor;
}
button * { -webkit-text-fill-color: currentColor; }

/* MIS Year 8 dashboard on mobile.
   The design shrinks the 860px mock with `zoom`, but zoom RE-RUNS LAYOUT at the
   scaled size, so the dashboard's internals reflow and clip. `transform: scale()`
   is purely visual, so the mock keeps its true desktop layout and is just drawn
   smaller — a real "screenshot" effect. Height is reserved by dash-scale.js.
   (div.* raises specificity above the design's .mis-dash-wrap rule.) */
@media (max-width: 820px) {
  div.mis-dash-wrap {
    width: 100% !important;
    max-width: 100% !important;
    zoom: 1 !important;
    margin: 44px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  div.mis-dash-browser {
    width: 860px !important;
    max-width: none !important;
    margin: 0 !important;
    transform-origin: top left;
  }
}