/* Reset + shared components (prefix .dm-). Group-specific CSS lives in css/<group>.css.
   RESPONSIVE RULE: never use @media for layout. #viewport gets .vp-desktop or .vp-mobile
   (JS, from its own width < 768) so the demo toolbar can preview a 375px phone on a desktop.
   Write mobile overrides as `.vp-mobile .your-class { … }`. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #e9eaec; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--owner-text-primary); -webkit-font-smoothing: antialiased; font-variation-settings: 'opsz' 14; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- viewport (the "device") ---------- */
#stage { min-height: 100%; display: flex; justify-content: center; align-items: flex-start; }
#viewport {
  position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--owner-page-bg);
  transform: translateZ(0);            /* makes position:fixed children behave like absolute inside the viewport */
  container-type: inline-size;
}
#stage.preview-mobile { padding: 20px 0; align-items: center; min-height: 100vh; }
#stage.preview-mobile #viewport { width: 375px; height: min(812px, calc(100vh - 40px)); border-radius: 32px; box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); }
#screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
#screen > * { flex: 1 1 auto; min-height: 0; }

/* ---------- typography helpers ---------- */
.dm-title    { font-family: var(--font-kepler); font-weight: 400; font-size: 33px; line-height: 39px; letter-spacing: -0.5px; color: var(--owner-text-primary); }
.dm-subtitle { font-size: 16px; line-height: 24px; color: var(--owner-subheader-text); }
.dm-kepler   { font-family: var(--font-kepler); }
.dm-sm       { font-size: 14px; line-height: 20px; }
.dm-muted    { color: var(--owner-subheader-text); }

/* ---------- buttons ---------- */
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 32px;
  border-radius: var(--radius-lg); font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; text-align: center;
  transition: background-color .12s, border-color .12s, opacity .12s;
}
.dm-btn svg { width: 16px; height: 16px; flex: none; }
.dm-btn--accent  { background: var(--delmar-orange); color: #fff; }
.dm-btn--accent:hover { background: var(--delmar-orange-dark); }
.dm-btn--ghost   { background: transparent; color: var(--owner-text-primary); }
.dm-btn--ghost:hover { background: rgba(15, 27, 46, .05); }
.dm-btn--outline { background: #fff; color: var(--owner-text-primary); border: 1px solid var(--owner-input-border); box-shadow: var(--shadow-xs); }
.dm-btn--outline:hover { background: var(--owner-page-bg); }
.dm-btn--navy    { background: var(--owner-sidebar); color: #fff; }
.dm-btn--navy:hover { background: var(--owner-sidebar-accent); }
.dm-btn--block   { width: 100%; }
.dm-btn--sm      { min-height: 32px; padding: 4px 12px; font-size: 14px; line-height: 20px; }
.dm-btn[disabled], .dm-btn.is-disabled { opacity: .5; pointer-events: none; }
.dm-link { color: var(--owner-accent-blue); font-weight: 500; text-decoration: none; cursor: pointer; }
.dm-link:hover { text-decoration: underline; }

/* ---------- form fields ---------- */
.dm-form  { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.dm-row   { display: flex; gap: 12px; width: 100%; align-items: flex-start; }
.dm-row > * { flex: 1 1 0; min-width: 0; }
.dm-field { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.dm-label { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--owner-text-primary); }
.dm-hint  { font-size: 14px; line-height: 20px; color: var(--owner-subheader-text); }
.dm-input, .dm-select, .dm-textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; background: var(--owner-input-bg); color: var(--owner-text-primary);
  border: 1px solid var(--owner-input-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  font-size: 16px; line-height: 24px; outline: none; appearance: none; -webkit-appearance: none;
}
.dm-input::placeholder, .dm-textarea::placeholder { color: var(--owner-muted-icon); opacity: 1; }
.dm-input:focus, .dm-select:focus, .dm-textarea:focus { border-color: var(--owner-accent-blue); }
.dm-textarea { min-height: 96px; resize: vertical; }
.dm-select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9bad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.dm-input.is-error, .dm-select.is-error, .dm-textarea.is-error { border-color: var(--owner-error-text); }

/* ---------- choices (rich radio / checkbox cards) ---------- */
.dm-choices { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dm-choice {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 12px; background: #fff;
  border: 1px solid var(--owner-input-border); border-radius: var(--radius-lg); cursor: pointer; text-align: left;
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--owner-text-primary);
}
.dm-choice:hover { border-color: #cfd6df; }
.dm-choice.is-selected { border-color: var(--owner-text-primary); box-shadow: 0 0 0 1px var(--owner-text-primary); }
.dm-choice__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dm-choice__desc { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--owner-subheader-text); }
.dm-radio, .dm-check { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.dm-radio::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #c9d0d9; background: #fff; box-shadow: var(--shadow-xs); }
.is-selected > .dm-radio::before, .dm-radio.is-on::before { border: 5px solid var(--owner-text-primary); }
.dm-check::before { content: ''; width: 16px; height: 16px; border-radius: 4px; border: 1px solid #c9d0d9; background: #fff; box-shadow: var(--shadow-xs); }
.is-selected > .dm-check::before, .dm-check.is-on::before {
  background: var(--owner-text-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--owner-text-primary);
}
.dm-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

/* ---------- counters (− value +) ---------- */
.dm-counter { display: inline-flex; align-items: center; gap: 12px; }
.dm-counter button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--owner-input-border); border-radius: var(--radius-md); background: #fff; color: var(--owner-subheader-text); }
.dm-counter button:disabled { opacity: .4; cursor: default; }
.dm-counter output { min-width: 24px; text-align: center; font-weight: 500; }

/* ---------- banners ---------- */
.dm-banner { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid; border-radius: var(--radius-lg); font-size: 14px; line-height: 20px; }
.dm-banner svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.dm-banner--info  { background: var(--owner-highlight-bg); border-color: #dbeafe; color: var(--owner-highlight-text); }
.dm-banner--error { background: var(--owner-error-bg); border-color: var(--owner-error-border); color: var(--owner-error-text); }
.dm-banner--ok    { background: var(--owner-success-bg); border-color: var(--owner-success-border); color: var(--owner-success-text); }
.dm-banner--warn  { background: var(--owner-warning-bg); border-color: var(--owner-warning-border); color: var(--owner-warning-text); }

/* ---------- overlays (modal / drawer) live INSIDE #viewport ---------- */
.dm-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(15, 27, 46, .5); display: flex; }
.dm-scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* ---------- demo toolbar ---------- */
#demo-bar { position: fixed; left: 12px; bottom: 12px; z-index: 9999; display: flex; gap: 6px; align-items: center; padding: 6px; background: rgba(15,27,46,.92); color: #fff; border-radius: 10px; font: 500 12px/16px var(--font-sans); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
#demo-bar select, #demo-bar button { font: inherit; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 6px; padding: 5px 8px; max-width: 280px; cursor: pointer; }
#demo-bar select option, #demo-bar select optgroup { color: #111; background: #fff; }
#demo-bar button.on { background: var(--delmar-orange); }
body.clean #demo-bar { display: none; }