/* Reserve roughly the rendered height while samples.js fetches and draws the
   examples, so the closing band does not jump down when they appear. Slightly
   under the smallest rendered height, so nothing moves up. Only with scripting:
   without it the box stays empty and the noscript note shows instead. */
@media (scripting: enabled) {
  #sample-emails:empty:not([hidden]) { display: block; min-height: 1700px; }
  @media (min-width: 900px) { #sample-emails:empty:not([hidden]) { min-height: 1150px; } }
}

/* Sample emails: source email -> what DayFlo shows. Scoped to .sx; reads the
   washed-horizon tokens when present and falls back to their values. The
   items themselves use the site's one card style (.df-* in washed-horizon.css). */
.sx {
  --sx-ink: var(--wh-ink, #0B1320);
  --sx-slate: #23374A;
  --sx-muted: var(--wh-muted, #526174);
  --sx-muted-2: var(--wh-muted-2, #627284);
  --sx-teal: #236E77;
  --sx-primary: var(--wh-primary, #2563EB);
  --sx-line: #CFE3DE;
  --sx-line-soft: #DCE9E6;
  --sx-paper: #FFFFFF;
  --sx-wash: var(--wh-mist, #EEF7F5);
  /* The app's source view (nf-source-preview-document.js): the chosen
     passage is a solid highlighter fill with dark ink; other passages DayFlo
     used get a dotted underline in muted ink. */
  --sx-highlighter: #f6e3a8;
  --sx-mark-ink: #5b6865;
  --sx-shadow: var(--wh-shadow-soft, 0 7px 22px rgb(11 19 32 / 4%));
  min-width: 0;
  color: var(--sx-ink);
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }

.sx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.sx-tab {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--sx-line);
  border-radius: 9px;
  background: rgb(255 255 255 / 82%);
  color: var(--sx-slate);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sx-tab:hover { border-color: #A9CFC7; background: #fff; }
.sx-tab[aria-selected="true"] {
  border-color: var(--sx-teal);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--sx-teal), var(--sx-shadow);
}
.sx-tab-name { font-size: .86rem; font-weight: 850; }
.sx-tab-label { color: var(--sx-muted-2); font-size: .72rem; font-weight: 650; }

.sx-panel:focus { outline: none; }
.sx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 36px minmax(0, .92fr);
  align-items: start;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--sx-line);
  border-radius: 16px;
  background: radial-gradient(circle at 52% 40%, rgb(125 211 200 / 14%), transparent 16rem), linear-gradient(150deg, #FCFEFD 0%, #EDF7F4 100%);
  box-shadow: var(--sx-shadow);
}

.sx-source, .sx-output {
  min-width: 0;
  border: 1px solid rgb(201 224 219 / 90%);
  border-radius: 12px;
  background: var(--sx-paper);
  box-shadow: 0 5px 14px rgb(11 19 32 / 5%);
}
.sx-source { position: sticky; top: 92px; }
.sx-source-head, .sx-output-head {
  display: grid;
  gap: 3px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--sx-line-soft);
}
.sx-eyebrow {
  color: var(--sx-teal);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sx-subject, .sx-count {
  color: var(--sx-ink);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.sx-meta { color: var(--sx-muted-2); font-size: .76rem; font-weight: 650; overflow-wrap: anywhere; }

.sx-body {
  position: relative;
  max-height: 26rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  color: #33485A;
  font-size: .82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
.sx-body:focus-visible { outline: 2px solid var(--sx-primary); outline-offset: -2px; }
.sx-mark {
  padding: 0 1px 3.5px;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--sx-mark-ink) 40%, transparent) 0 4px, transparent 4px 7px) left bottom / 100% 1px no-repeat;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sx-mark[role="button"] { cursor: pointer; }
.sx-mark[role="button"]:not(.is-active):hover {
  background-image: repeating-linear-gradient(to right, var(--sx-mark-ink) 0 4px, transparent 4px 7px);
}
.sx-mark:focus-visible { outline: 2px solid var(--sx-primary); outline-offset: 1px; border-radius: 3px; }
.sx-mark.is-active {
  padding: 2px;
  border-radius: 3px;
  background: var(--sx-highlighter);
  color: var(--sx-ink);
}
.sx-gap {
  display: block;
  margin: 2px 0 10px;
  line-height: 1;
  color: var(--sx-muted-2);
  font-weight: 800;
  letter-spacing: .1em;
}
.sx-hint {
  margin: 0;
  padding: 10px 16px 13px;
  border-top: 1px solid var(--sx-line-soft);
  color: var(--sx-muted-2) !important;
  font-size: .72rem;
  font-weight: 700;
}
.sx-hint:empty { display: none; }

.sx-arrow {
  align-self: center;
  color: var(--sx-teal);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

.sx-items { margin: 0; padding: 6px; list-style: none; }
.sx-item + .sx-item { border-top: 1px solid var(--sx-line-soft); }
.sx-item-button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 10px 10px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.sx-item-button { cursor: pointer; }
button.sx-item-button:hover { background: var(--sx-wash); }
button.sx-item-button[aria-pressed="true"] { border-color: #E3CC86; background: color-mix(in srgb, var(--sx-highlighter) 30%, white); }
.sx-item-button:focus-visible, .sx-tab:focus-visible { outline: 2px solid var(--sx-primary); outline-offset: 2px; }
.sx-more {
  display: block;
  min-height: 44px;
  margin: 0 6px 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sx-primary);
  font: inherit;
  font-size: .86rem;
  font-weight: 820;
  cursor: pointer;
}
.sx-more:hover { background: var(--sx-wash); }
.sx-more:focus-visible { outline: 2px solid var(--sx-primary); outline-offset: 2px; }

.sx-callout {
  margin: 0 0 12px;
  color: var(--sx-slate) !important;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.45;
}
.sx-source-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sx-empty { margin: 0; padding: 16px; font-size: .84rem; }

@media (min-width: 900px) {
  /* As tall as the sticky email can be while it still fits the window. */
  .sx-body { max-height: min(48rem, max(26rem, calc(100vh - 240px))); }
}
@media (max-width: 899.98px) {
  .sx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .sx-source { position: static; }
  .sx-arrow { transform: rotate(90deg); line-height: 1; }
  .sx-body { max-height: 20rem; }
}
@media (max-width: 639.98px) {
  .sx-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-tab-label { display: none; }
  .sx-grid { padding: 10px; border-radius: 12px; }
  .sx-source-head, .sx-output-head { padding: 12px 13px 10px; }
  .sx-body { padding: 12px 13px; font-size: .8rem; }
}