/* Host-page "this is a preview" notice for the canned web demo.
 *
 * Lives entirely outside the Flutter app (see lib/core/host_page_demo_notice.dart
 * and Task 1 of the UI redesign): plain, self-contained CSS, no external
 * requests, no CDN, no web fonts. Approximates design/tokens.css's teal +
 * warm-paper palette without importing it, since this file has to stand on
 * its own under a strict CSP.
 *
 * Hidden by default (`display: none` on #demo-banner) so a non-demo web
 * build renders nothing here at all; only lib/main.dart's kDemoMode branch
 * ever reveals it. */

html, body {
  height: 100%;
  margin: 0;
}

/* Page ground. A mid grey, roughly 50% — dark enough that the app surface
 * reads as a lit object sitting on top of it rather than a panel of the
 * same page. Warmed very slightly (#8A8781 rather than a flat #808080) so
 * it sits in the same family as the warm-paper palette instead of looking
 * like an unstyled default.
 *
 * The dark theme moves the OTHER way, to near-black: a mid grey there
 * would be lighter than the app surface and the stage would read as a hole
 * punched in the page rather than something raised above it. */
#demo-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  background: #8A8781;
}

/* Everything below the banner: the page ground the app sits on. Padded and
 * centred so the stage floats rather than filling the window. */
#demo-frame > #demo-stage {
  margin: 14px auto;
}

/* The "app" surface: a contained, bordered, rounded card. `overflow:
 * hidden` is what keeps the Flutter canvas clipped to the rounded corners.
 *
 * Sized by the viewport switcher (see #demo-frame[data-view] below). In
 * desktop view it fills the available space; in mobile view it is pinned to
 * a phone-sized box. Either way Flutter re-lays-out from this element's
 * bounding box. */
#demo-stage {
  display: flex;
  flex-direction: column;
  width: calc(100% - 28px);
  max-width: 1280px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #F8F8F5;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  /* Four layers rather than two. Real falloff is not one big blur — it is
   * a tight contact shadow holding the edge down, then progressively wider
   * and softer layers carrying the lift outward. Doubling a single blur
   * just makes a grey smudge; stacking them keeps the edge crisp while the
   * penumbra reaches much further, which is what reads as "floating". */
  box-shadow: 0 2px 4px rgba(16, 20, 23, 0.10),
              0 8px 18px rgba(16, 20, 23, 0.16),
              0 26px 52px rgba(16, 20, 23, 0.24),
              0 56px 110px rgba(16, 20, 23, 0.30);
}

/* Mobile view: a phone-shaped stage, centred, with a heavier radius so it
 * reads as a handset rather than a narrow window. Height is capped to the
 * space available so it never overflows a short screen. */
#demo-frame[data-view="mobile"] #demo-stage {
  width: 390px;
  max-width: 100%;
  flex: 0 1 844px;
  border-radius: 26px;
}

/* Viewport switcher. Segmented-control styling, sized to the 44px touch
 * target the rest of this file uses. Hidden until a kDemoMode build reveals
 * it, exactly like the banner. */
#demo-toolbar {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #EFEEE8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Liberation Sans", Arial, sans-serif;
}

.demo-toolbar__btn {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #55534C;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.demo-toolbar__btn:hover { color: #22201C; }
.demo-toolbar__btn.is-active {
  background: #FFFFFF;
  color: #22201C;
  box-shadow: 0 1px 2px rgba(20, 26, 30, 0.12);
}
.demo-toolbar__btn:focus-visible {
  outline: 3px solid #265A68;
  outline-offset: 2px;
}

/* The Flutter app fills whatever height the banner does not use. Flutter's
 * hostElement sizing (see web/flutter_bootstrap.js) reads this element's
 * bounding box, so no extra JS is needed to keep it in sync as the banner
 * expands/collapses. */
#flutter-host {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#demo-banner {
  display: none; /* revealed only by lib/core/host_page_demo_notice_web.dart */
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px;
  background: #FFFFFF;
  color: #22201C;
  border-bottom: 2px solid #AECFD7;
  box-shadow: 0 2px 10px rgba(20, 26, 30, 0.06);
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Liberation Sans", Arial, sans-serif;
  box-sizing: border-box;
}

.demo-banner__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.demo-banner__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #A93E1B;
  margin-top: 2px;
}

.demo-banner__text {
  flex: 1;
  min-width: 0;
}

.demo-banner__title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 650;
  letter-spacing: 0;
}

.demo-banner__body {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #55534C;
  max-width: 68ch;
}

.demo-banner__toggle {
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #22201C;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.demo-banner__toggle:hover { background: #EFEEE8; }
.demo-banner__toggle:focus-visible {
  outline: 3px solid #265A68;
  outline-offset: 2px;
}

/* Dark theme applies to the STAGE ONLY.
 *
 * The page ground, the preview banner and the viewport switcher deliberately
 * do NOT follow the app's theme. This is a demo OF THE APP, not of the page
 * around it: the chrome is a fixed frame the app is displayed in, like a
 * gallery wall, and a wall that repaints itself every time the picture
 * changes draws attention to the wrong thing.
 *
 * It also means `prefers-color-scheme` no longer touches this file at all —
 * the OS setting says nothing about which theme the app is in, and using it
 * was what let the two drift apart in the first place. The only signal is
 * `data-theme`, stamped on #demo-frame by `window.setDemoTheme`
 * (web/demo_banner.js) from Dart on first build and on every toggle
 * (lib/app.dart's `_syncHostPageTheme`). */
#demo-frame[data-theme="dark"] #demo-stage {
  background: #101417;
  border-color: #3A464F;
  /* Shadow AND halo. The app is now a dark object on a mid-grey ground, so
   * it still casts — but the outward glow is what sells a lit screen, and
   * it is drawn from the app's own accent (#7FB2BF) so the light looks like
   * it belongs to the app. Same layered-falloff principle as the light
   * theme: several radii, not one big blur. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
              0 2px 4px rgba(10, 13, 15, 0.28),
              0 10px 26px rgba(10, 13, 15, 0.34),
              0 34px 74px rgba(10, 13, 15, 0.40),
              0 0 48px rgba(127, 178, 191, 0.20),
              0 0 130px rgba(127, 178, 191, 0.12);
}