/* /embed/support: the admin app's support form, shown inside the app's own
   dialog, so it is dressed as one of the app's Mantine forms rather than as
   this site. The neutrals mirror the app's theme (cms-fe src/ui/theme.ts: the
   dark tuple, and Mantine's light defaults); the primary color is the app's,
   passed in the URL by the dialog (each site in the app has its own). The
   .sf prefix keeps these ahead of the site's Tailwind forms-plugin rules. */
:root {
  color-scheme: light;
  --sf-body: #fff;
  --sf-text: #000;
  --sf-dimmed: #868e96;
  --sf-placeholder: #adb5bd;
  --sf-input: #fff;
  --sf-border: #ced4da;
  --sf-error: #fa5252;
  --sf-primary: #445b85;
  --sf-primary-hover: #34476a;
  --sf-on-primary: #fff;
  --sf-radius: 4px;
  --sf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --sf-body: #191b20;
  --sf-text: #e8e9ec;
  --sf-dimmed: #9ea3ac;
  --sf-placeholder: #737983;
  --sf-input: #22252b;
  --sf-border: #4b515a;
  --sf-error: #e03131;
  --sf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ea3ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html, body { background: var(--sf-body); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
}

/* The dialog supplies the padding; a hairline keeps focus borders unclipped. */
.sf { padding: 2px 2px 4px; }
.sf [hidden] { display: none !important; }
.sf-intro { margin: 0 0 16px; }

.sf-form { display: grid; gap: 16px; --accent: var(--sf-primary); }
.sf-row { display: grid; gap: 16px; }
@media (min-width: 540px) { .sf-row { grid-template-columns: 1fr 1fr; } }

.sf-field { display: grid; align-content: start; }
.sf-label { font-size: 14px; font-weight: 500; line-height: 1.55; }
.sf-required { color: var(--sf-error); margin-left: 4px; }
.sf-optional { color: var(--sf-dimmed); font-weight: 400; }
.sf-desc { margin: 0 0 5px; font-size: 12px; line-height: 1.2; color: var(--sf-dimmed); }

.sf .sf-input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  line-height: 34px;
  color: var(--sf-text);
  background-color: var(--sf-input);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: none;
  outline: none;
  appearance: none;
}
.sf .sf-input::placeholder { color: var(--sf-placeholder); opacity: 1; }
.sf .sf-input:focus { border-color: var(--sf-primary); box-shadow: none; outline: none; }
.sf textarea.sf-input { height: auto; min-height: 120px; padding: 8px 12px; line-height: 1.55; resize: vertical; }
.sf select.sf-input {
  padding-right: 34px;
  background-image: var(--sf-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}
/* nothing picked yet: the "Choose a topic" option reads as a placeholder */
.sf select.sf-input:invalid { color: var(--sf-placeholder); }
.sf select.sf-input option { color: var(--sf-text); background-color: var(--sf-input); }

.sf-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.sf .sf-button {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--sf-radius);
  background: var(--sf-primary);
  color: var(--sf-on-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}
.sf .sf-button:hover { background: var(--sf-primary-hover); }
.sf .sf-button:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }