/* demo.html — the full-page demo at slotspicker.app/demo.
   Loads on top of landing.css (for the tokens, the buttons and Segoe UI), and owns only the mail
   window, the pane inside it and the small-screen behaviour. */

.demo-body {
  margin: 0;
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--font);
  /* On a phone, 100vh is the screen WITHOUT the browser's address bar, so a layout pinned to it runs
     under that bar. Nothing here scrolls, so the hidden strip was unreachable: on a real phone the
     app's bottom deck (the slot list, the timezone pills and Insert) was simply missing. 100dvh is
     the height actually on screen. The vh line stays as the fallback for older browsers. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* the window manages its own scrolling, the page does not scroll */
}

/* ---- top bar ------------------------------------------------------------- */
.demo-bar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: #fff; border-bottom: 1px solid var(--line-2);
}
.demo-brand {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none;
}
/* "Slots Picker Demo", with the last word carrying the accent so the page says what it is. */
.demo-word { color: var(--accent); }
.demo-bar-spacer { flex: 1; }

/* ---- the window ---------------------------------------------------------- */
/* The wrapper exists only to stretch: without it the window sizes to its content and floats in the
   middle of the page instead of filling the screen. */
.demo-stage-full { flex: 1; min-height: 0; display: flex; }

/* One window containing both halves. In Outlook the task pane sits INSIDE the compose window, and a
   visitor who sees two floating panels reads it as two separate apps. */
.window {
  flex: 1; min-height: 0;
  margin: clamp(12px, 2.4vw, 26px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.win-titlebar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.win-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.win-dots { display: inline-flex; gap: 6px; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }

/* The draft and the pane share the window below the title bar. --pane is moved by the splitter. */
.win-body {
  --pane: 420px;
  flex: 1; min-height: 0;
  display: flex; align-items: stretch;
}

.mail-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mail-toolbar {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.mail-send {
  border: 0; border-radius: var(--radius); padding: 7px 18px;
  background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.mail-send:hover { background: var(--accent-press); }
.mail-tool { font-size: 13px; color: var(--faint); }
.mail-hint { font-size: 12.5px; color: var(--muted); }

.mail-fields { flex: none; padding: 4px 16px; }
.mail-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mail-label { width: 58px; flex: none; color: var(--faint); }
.mail-value { color: var(--ink); }

.mail-body {
  flex: 1; min-height: 0; overflow: auto;
  padding: 18px 16px 28px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.mail-body:focus { outline: none; }
.mail-body p { margin: 0 0 14px; }

/* The inserted slots, highlighted briefly so the moment is unmissable. */
.mail-body .ins { animation: slotflash 1.5s ease-out; border-radius: 3px; }
@keyframes slotflash {
  0%   { background: #BFDBFE; }
  100% { background: transparent; }
}

/* ---- the splitter -------------------------------------------------------- */
/* Sits between the two halves and takes the resize cursor, like the task pane edge in Outlook. */
.splitter {
  flex: none; width: 7px; cursor: col-resize;
  background: var(--line); position: relative;
  transition: background .15s;
}
.splitter:hover, .splitter:focus-visible, .dragging .splitter { background: var(--accent); outline: none; }
/* A wider invisible grab area, so the handle is catchable without being a thick grey bar. */
.splitter::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px;
}
/* While dragging, the iframe must not eat the pointer, or the drag stops dead at the pane's edge. */
.dragging { cursor: col-resize; user-select: none; }
.dragging .panel iframe { pointer-events: none; }

/* ---- the task pane ------------------------------------------------------- */
.panel {
  flex: none; width: var(--pane);
  display: flex; flex-direction: column; min-width: 0;
  background: #fff;
}
/* Brand blue, so the pane announces itself against the draft rather than blending into more grey
   chrome. Brand blue rather than the interactive accent: this bar is identity, not a control. */
.panel-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--brand); border-bottom: 1px solid var(--brand-deep);
  font-size: 13px; font-weight: 600; color: #fff;
}
.panel iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; }

/* ---- small screens ------------------------------------------------------- */
/* A desktop mail window does not survive a phone, and most of this page's traffic will arrive from a
   link on a phone. Below tablet width the draft and the splitter go, and the app fills the screen. */
@media (max-width: 900px) {
  .window { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .win-titlebar, .mail-pane, .splitter { display: none; }
  .panel { width: 100%; }
  /* The bar at the top already says Slots Picker; a second label would cost a line of grid. */
  .panel-head { display: none; }
  /* Three controls do not fit a phone's top bar. The brand is the way home instead. */
  .demo-bar .btn-ghost { display: none; }
}