/*! Trifft sich — page styles (was an inline <style> in the bundle). */
body { margin: 0; font-family: "Public Sans", system-ui, sans-serif; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
a { color: #1d4ed8; }
a:hover { color: #1e3a8a; }
.tsc-scroll-x { scrollbar-width: thin; }
.tsc-scroll-x::-webkit-scrollbar { height: 6px; }
.tsc-scroll-x::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 99px; }
body[data-keys="1"] [data-i18n] { outline: 1px dashed rgba(37,99,235,.45); outline-offset: 2px; }
body[data-keys="1"] [data-i18n]::after {
  content: attr(data-i18n); display: block; font: 500 9px/1.3 ui-monospace, Menlo, monospace;
  color: #1d4ed8; background: rgba(37,99,235,.08); padding: 1px 3px; border-radius: 3px;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-tags="1"] [data-component] { outline: 1px solid rgba(217,70,239,.5); outline-offset: -1px; position: relative; }
body[data-tags="1"] [data-component]::before {
  content: attr(data-component); position: absolute; top: 0; left: 0; z-index: 40;
  font: 600 9px/1.4 ui-monospace, Menlo, monospace; color: #fff; background: #a21caf;
  padding: 1px 4px; border-bottom-right-radius: 4px; pointer-events: none;
}

/* Page shell. Replaces the bundler runtime's full-page CSS, which sized
   its own #dc-root wrapper the same way. */
html, body { height: 100%; margin: 0; }
#app-root { height: 100%; }

/* ── form controls ─────────────────────────────────────────────────────────
   The design source loads Tailwind as `cdn.tailwindcss.com?plugins=forms`;
   the v4 browser build here has no plugin mechanism, so this is the part of
   @tailwindcss/forms (base strategy) the mockup actually uses: the search and
   text inputs, the date/time/number fields, the textareas, the four <select>s
   and the three checkboxes.

   It lives in @layer base on purpose. Everything above this comment is
   unlayered and therefore outranks Tailwind, which is what those rules want.
   These reset the *native* control so the utility classes on it can do the
   styling — `border-slate-200`, `rounded-lg`, `px-3` have to win, and a
   layered rule always loses to Tailwind's utilities. */
@layer base {
  [type='text'], [type='search'], [type='number'], [type='date'], [type='time'],
  textarea, select {
    appearance: none;
    background-color: #fff;
    border: 1px solid #6b7280;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  [type='text']:focus, [type='search']:focus, [type='number']:focus, [type='date']:focus,
  [type='time']:focus, textarea:focus, select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
  }

  input::placeholder, textarea::placeholder { color: #6b7280; opacity: 1; }

  ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
  ::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-top: 0; padding-bottom: 0;
  }

  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }

  [type='checkbox'] {
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    padding: 0;
    border: 1px solid #6b7280;
    border-radius: 0;
    background-color: #fff;
    background-origin: border-box;
    color: #2563eb;
    user-select: none;
    print-color-adjust: exact;
  }
  [type='checkbox']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
  }
  [type='checkbox']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}