/**
 * Morgen Calendar Link Generator v2.1.0
 * Scoped styles for external embedding
 *
 * This file is the SINGLE SOURCE OF TRUTH for the embeddable version.
 * It exactly matches the styles used on https://morgen-so.github.io/Calendar-link-generator/
 *
 * Usage:
 * <div id="morgen-calendar-tool" style="width: 100%;"></div>
 * <link rel="stylesheet" href="https://morgen-so.github.io/Calendar-link-generator/calendar-tool.css?v=2.1.0">
 * <script src="https://morgen-so.github.io/Calendar-link-generator/calendar-tool.js?v=2.1.0"></script>
 *
 * SEAMLESS EMBEDDING:
 * -------------------
 * - Container (#morgen-calendar-tool) is FULLY TRANSPARENT - blends with any host page
 * - Only the form card (.calendar-tool__form) has a visible dark background (#191A23)
 * - Minimal padding (16px) prevents shadow clipping without creating visible borders
 * - DO NOT set min-height on the container - let it size to content naturally
 *
 * WEBFLOW EMBED INSTRUCTIONS:
 * ---------------------------
 * When embedding this tool in Webflow:
 * 1. DO NOT set min-height or fixed height on the embed container
 * 2. Set overflow: visible on the parent (prevents shadow clipping)
 * 3. The tool will blend seamlessly with your dark-themed pages
 *
 * Recommended Webflow container settings:
 * - Display: Block or Flex
 * - Overflow: Visible
 * - Height: Auto (let content determine height)
 * - Background: any (tool is transparent, only form card has background)
 */

/* ============================================
   CSS VARIABLES (Scoped to container)
   ============================================ */
#morgen-calendar-tool {
  /* Accent Colors */
  --accent: #625EFC;
  --accent-lighter: #afadff;
  --accent-darker: #5855EC;
  --accent-dark: #3D3B95;
  --accent-gradient: linear-gradient(145deg, #625EFC, #765efc);

  /* Dark Mode Backgrounds */
  --bg-page: #0f0f1a;
  --bg-primary: #191A23;
  --bg-secondary: #1f2029;
  --bg-light: #2A2E3C;
  --bg-accent: #2d2f3d;
  --bg-field: #141519;
  --bg-field-hover: #0f1013;

  /* Dark Mode Text */
  --text-primary: #f5f5f5;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-placeholder: rgba(255, 255, 255, 0.4);

  /* Neutral Labels (Text Opacity) */
  --neutral-l00: rgba(255, 255, 255, 1);
  --neutral-l01: rgba(255, 255, 255, 0.7);
  --neutral-l02: rgba(255, 255, 255, 0.6);
  --neutral-l03: rgba(255, 255, 255, 0.4);
  --neutral-l04: rgba(255, 255, 255, 0.25);

  /* Neutral Dividers (Border Opacity) */
  --neutral-d00: rgba(255, 255, 255, 0.14);
  --neutral-d01: rgba(255, 255, 255, 0.08);
  --neutral-d02: rgba(255, 255, 255, 0.04);

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);

  /* Neutral Surfaces */
  --neutral-s00: rgba(31, 32, 41, 1);
  --neutral-s01: rgba(37, 39, 50, 1);
  --neutral-s02: rgba(45, 47, 61, 1);
  --neutral-s03: rgba(56, 58, 74, 1);
  --neutral-s04: rgba(66, 69, 87, 1);

  /* System Colors - Accent */
  --system-a00: rgba(98, 94, 252, 1);
  --system-a01: rgba(130, 126, 251, 1);

  /* System Colors - Success */
  --success: #53C072;
  --system-g00: rgba(144, 224, 162, 1);
  --system-g01: rgba(155, 229, 172, 1);

  /* System Colors - Warning */
  --warning: #ed975e;
  --system-o00: rgba(245, 192, 112, 1);
  --system-o01: rgba(250, 203, 133, 1);
  --system-o02: rgba(246, 169, 81, 1);

  /* System Colors - Error */
  --error: #FC6C5E;
  --error-darker: #de4b3d;
  --error-light: rgba(252, 108, 94, 0.15);
  --system-r00: rgba(240, 97, 97, 1);
  --system-r01: rgba(251, 111, 111, 1);

  /* Utility Colors */
  --grey: #8a8a94;
  --grey-secondary: #6e6e78;
  --grey-darker: #5a5a64;
  --grey-lighter: #3a3a44;
  --yellow: #F3C26A;

  /* Typography */
  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SF Mono, SFMono-Regular, Menlo, Lucida Console, Courier New, Courier, monospace;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-3xl: 36px;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Line Heights */
  --line-height-xs: 13px;
  --line-height-sm: 14px;
  --line-height-base: 16px;
  --line-height-md: 17px;
  --line-height-lg: 18px;

  /* Letter Spacing */
  --letter-spacing: -0.01em;
  --letter-spacing-tight: -0.02em;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 3px;
  --spacing-sm: 4px;
  --spacing-md: 6px;
  --spacing-lg: 8px;
  --spacing-xl: 10px;
  --spacing-2xl: 12px;
  --spacing-3xl: 16px;
  --spacing-4xl: 18px;
  --spacing-5xl: 20px;

  /* Component Padding */
  --input-padding: 6px 8px;
  --input-padding-lg: 8px 12px;
  --button-padding-sm: 2px 7px;
  --button-padding: 3px 8px;
  --button-padding-md: 5px 8px;
  --button-padding-lg: 8px 16px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-default: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 31px;
  --radius-round: 50px;

  /* Shadows */
  --shadow-card: 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 8px 16px rgba(0, 0, 0, 0.40);
  --shadow-tooltip: 0px 2px 3px rgba(0, 0, 0, 0.32), 0px 8px 16px rgba(0, 0, 0, 0.32);
  --shadow-btn-primary: 0px 2px 2px rgba(0, 0, 0, 0.06), 0px 4px 4px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(255, 255, 255, 0.06);
  --shadow-btn-secondary: 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 1px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(255, 255, 255, 0.03);

  /* Animation */
  --duration-fast: 0.1s;
  --duration-default: 0.175s;
  --duration-long: 0.275s;
  --easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-ease-out: ease-out;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--accent);
  --caret-color: #625efc;

  /* Scrollbar */
  --scrollbar-width: 6px;
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}

/* ============================================
   BASE STYLES FOR CONTAINER
   ============================================ */
#morgen-calendar-tool {
  font-family: var(--font-family);
  font-size: var(--text-md);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  width: 100%;
  /* Transparent background for seamless embedding in host pages */
  /* The form panel (.calendar-tool__form) provides its own styled background */
  background: transparent;
  /* Minimal padding - just enough for shadow visibility */
  /* Webflow parent container should provide additional spacing if needed */
  padding: 16px;
  /* Ensure shadows are not clipped by parent containers */
  overflow: visible;
}

#morgen-calendar-tool *,
#morgen-calendar-tool *::before,
#morgen-calendar-tool *::after {
  box-sizing: border-box;
}

#morgen-calendar-tool *::selection {
  background-color: #625efc;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

#morgen-calendar-tool input,
#morgen-calendar-tool textarea {
  caret-color: var(--caret-color);
}

/* Scrollbar styling */
#morgen-calendar-tool *::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

#morgen-calendar-tool *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-round);
}

#morgen-calendar-tool *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ============================================
   ACCESSIBILITY - VISUALLY HIDDEN
   ============================================ */
#morgen-calendar-tool .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   CALENDAR TOOL - MAIN CONTAINER
   ============================================ */
#morgen-calendar-tool .calendar-tool {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-family);
  box-sizing: border-box;
  overflow: visible;
}

/* ============================================
   FORM CONTAINER
   ============================================ */
#morgen-calendar-tool .calendar-tool__form {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* ============================================
   HEADER
   ============================================ */
#morgen-calendar-tool .calendar-tool__header {
  margin-bottom: 20px;
}

#morgen-calendar-tool .calendar-tool__description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--line-height-base);
}

/* ============================================
   FORM FIELDS
   ============================================ */
#morgen-calendar-tool .calendar-tool__field {
  margin-bottom: 16px;
}

#morgen-calendar-tool .calendar-tool__field:last-of-type {
  margin-bottom: 0;
}

/* ============================================
   LABELS
   ============================================ */
#morgen-calendar-tool .calendar-tool__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

#morgen-calendar-tool .calendar-tool__required {
  color: var(--system-r00);
  margin-left: 2px;
}

#morgen-calendar-tool .calendar-tool__optional {
  font-weight: var(--font-regular);
  color: var(--neutral-l02);
  margin-left: 4px;
}

/* ============================================
   INPUT FIELDS
   ============================================ */
#morgen-calendar-tool .calendar-tool__input {
  width: 100%;
  min-height: 44px;
  background: var(--bg-field);
  border: none;
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing);
  outline: none;
  box-sizing: border-box;
}

#morgen-calendar-tool .calendar-tool__input::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

#morgen-calendar-tool .calendar-tool__input:hover {
  background: var(--bg-field-hover);
}

#morgen-calendar-tool .calendar-tool__input:focus {
  box-shadow: 0 0 0 2px var(--accent);
}

#morgen-calendar-tool .calendar-tool__input:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Textarea */
#morgen-calendar-tool .calendar-tool__input--textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Select */
#morgen-calendar-tool .calendar-tool__input--select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D7D6DB' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* ============================================
   DATETIME ROW
   ============================================ */
#morgen-calendar-tool .calendar-tool__datetime-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

#morgen-calendar-tool .calendar-tool__datetime-block {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#morgen-calendar-tool .calendar-tool__datetime-block--date {
  flex: 1 1 100%;
}

#morgen-calendar-tool .calendar-tool__datetime-block--time {
  flex: 1 1 100%;
}

/* Datetime trigger button */
#morgen-calendar-tool .calendar-tool__datetime-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--bg-field);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing),
              box-shadow var(--duration-fast) var(--easing);
  font-family: var(--font-family);
}

#morgen-calendar-tool .calendar-tool__datetime-trigger:hover {
  background: var(--neutral-s01);
  border-color: var(--neutral-d00);
}

#morgen-calendar-tool .calendar-tool__datetime-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

#morgen-calendar-tool .calendar-tool__datetime-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Invalid state */
#morgen-calendar-tool .calendar-tool__datetime-block--invalid .calendar-tool__datetime-trigger {
  box-shadow: 0 0 0 1px var(--system-r00);
}

/* Datetime display value */
#morgen-calendar-tool .calendar-tool__datetime-value {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing);
}

/* Datetime icon */
#morgen-calendar-tool .calendar-tool__datetime-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-l02);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__datetime-trigger:hover .calendar-tool__datetime-icon {
  color: var(--neutral-l01);
}

#morgen-calendar-tool .calendar-tool__datetime-icon svg {
  width: 16px;
  height: 16px;
}

/* Hidden native input */
#morgen-calendar-tool .calendar-tool__datetime-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#morgen-calendar-tool .calendar-tool__datetime-block:focus-within .calendar-tool__datetime-trigger {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ============================================
   TIME PICKER DROPDOWN
   ============================================ */
#morgen-calendar-tool .calendar-tool__time-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-primary);
  border: 1px solid var(--neutral-d00);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-fast) var(--easing),
              visibility var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__time-picker--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#morgen-calendar-tool .calendar-tool__time-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__time-option:hover {
  background: var(--neutral-s01);
}

#morgen-calendar-tool .calendar-tool__time-option--selected {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  font-weight: var(--font-medium);
}

/* ============================================
   HINT TEXT
   ============================================ */
#morgen-calendar-tool .calendar-tool__hint {
  font-size: var(--text-xs);
  color: var(--neutral-l02);
  margin-top: 4px;
  line-height: var(--line-height-xs);
}

#morgen-calendar-tool .calendar-tool__hint a {
  color: var(--accent-lighter);
  text-decoration: underline;
  text-decoration-color: var(--neutral-l03);
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__hint a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ============================================
   ERROR STATES
   ============================================ */
#morgen-calendar-tool .calendar-tool__error {
  font-size: var(--text-xs);
  color: var(--system-r00);
  margin-top: 4px;
  min-height: 0;
}

#morgen-calendar-tool .calendar-tool__error:empty {
  display: none;
}

#morgen-calendar-tool .calendar-tool__input--invalid {
  box-shadow: 0 0 0 1px var(--system-r00);
}

#morgen-calendar-tool .calendar-tool__input--invalid:focus {
  box-shadow: 0 0 0 2px var(--system-r00);
}

/* Error Summary */
#morgen-calendar-tool .calendar-tool__error-summary {
  background: var(--error-light);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
}

#morgen-calendar-tool .calendar-tool__error-summary-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--system-r00);
  margin: 0 0 8px 0;
}

#morgen-calendar-tool .calendar-tool__error-summary-list {
  margin: 0;
  padding-left: 16px;
  font-size: var(--text-sm);
  color: var(--system-r00);
}

#morgen-calendar-tool .calendar-tool__error-summary-list li {
  margin-bottom: 4px;
}

#morgen-calendar-tool .calendar-tool__error-summary-list a {
  color: var(--system-r00);
  text-decoration: underline;
}

/* ============================================
   BUTTONS
   ============================================ */
#morgen-calendar-tool .calendar-tool__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border: 0;
  font-family: var(--font-family);
  font-weight: 500;
  text-wrap: nowrap;
  cursor: pointer;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing),
              box-shadow var(--duration-fast) var(--easing),
              opacity var(--duration-fast) var(--easing);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#morgen-calendar-tool .calendar-tool__button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Primary Button */
#morgen-calendar-tool .calendar-tool__button--primary {
  background: var(--accent-gradient);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 16px;
  box-shadow: var(--shadow-btn-primary);
  width: 100%;
}

#morgen-calendar-tool .calendar-tool__button--primary:hover {
  background: var(--accent-darker);
}

#morgen-calendar-tool .calendar-tool__button--primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Secondary Button */
#morgen-calendar-tool .calendar-tool__button--secondary {
  background: var(--neutral-s00);
  color: var(--neutral-l01);
  border-radius: var(--radius-default);
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: var(--shadow-btn-secondary);
  text-decoration: none;
  flex: 1;
}

#morgen-calendar-tool .calendar-tool__button--secondary:hover {
  background: var(--neutral-s01);
}

#morgen-calendar-tool .calendar-tool__button--secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tertiary Button */
#morgen-calendar-tool .calendar-tool__button--tertiary {
  background: transparent;
  color: var(--neutral-l02);
  border-radius: var(--radius-default);
  padding: 10px 16px;
  font-size: 14px;
  flex: 1;
}

#morgen-calendar-tool .calendar-tool__button--tertiary:hover {
  background: var(--neutral-s02);
  color: var(--neutral-l00);
}

#morgen-calendar-tool .calendar-tool__button--tertiary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   ACTIONS CONTAINER
   ============================================ */
#morgen-calendar-tool .calendar-tool__actions {
  margin-top: 20px;
}

/* ============================================
   OUTPUT SECTION
   ============================================ */
#morgen-calendar-tool .calendar-tool__output {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-default) var(--easing),
              transform var(--duration-default) var(--easing);
}

#morgen-calendar-tool .calendar-tool__output[hidden] {
  display: none;
}

#morgen-calendar-tool .calendar-tool__output--visible {
  opacity: 1;
  transform: translateY(0);
}

#morgen-calendar-tool .calendar-tool__output-header {
  margin-bottom: 16px;
}

#morgen-calendar-tool .calendar-tool__output-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================
   LINK CARDS
   ============================================ */
#morgen-calendar-tool .calendar-tool__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#morgen-calendar-tool .calendar-tool__link-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: var(--neutral-s01);
  border-radius: var(--radius-lg);
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-default) var(--easing),
              transform var(--duration-default) var(--easing),
              background-color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card {
  opacity: 1;
  transform: translateY(0);
}

#morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card:nth-child(1) {
  transition-delay: 0.05s;
}

#morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card:nth-child(2) {
  transition-delay: 0.1s;
}

#morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card:nth-child(3) {
  transition-delay: 0.15s;
}

#morgen-calendar-tool .calendar-tool__link-card:hover {
  background: var(--neutral-s02);
}

#morgen-calendar-tool .calendar-tool__link-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#morgen-calendar-tool .calendar-tool__link-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#morgen-calendar-tool .calendar-tool__link-name {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

#morgen-calendar-tool .calendar-tool__link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ============================================
   OUTPUT ACTIONS
   ============================================ */
#morgen-calendar-tool .calendar-tool__output-actions {
  margin-top: 16px;
  text-align: center;
}

/* ============================================
   MORGEN CTA - IMPORTANT!
   ============================================ */
#morgen-calendar-tool .calendar-tool__morgen-cta-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

#morgen-calendar-tool .calendar-tool__morgen-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  background: transparent;
  cursor: default;
  user-select: none;
}

#morgen-calendar-tool .calendar-tool__morgen-cta-text {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing);
  border-bottom: 1px dashed var(--border-secondary);
  transition: color var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__morgen-cta:hover .calendar-tool__morgen-cta-text {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* Tooltip */
#morgen-calendar-tool .calendar-tool__morgen-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--easing),
              visibility var(--duration-fast) var(--easing);
  z-index: 100;
}

/* Hover bridge */
#morgen-calendar-tool .calendar-tool__morgen-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

/* Show tooltip on hover */
#morgen-calendar-tool .calendar-tool__morgen-cta:hover .calendar-tool__morgen-tooltip,
#morgen-calendar-tool .calendar-tool__morgen-tooltip:hover {
  opacity: 1;
  visibility: visible;
}

#morgen-calendar-tool .calendar-tool__morgen-tooltip-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
  margin: 0 0 12px 0;
  text-align: center;
}

#morgen-calendar-tool .calendar-tool__morgen-tooltip-button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ff8393 0%, #f3c06b 100%);
  color: #1d254f;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__morgen-tooltip-button:hover {
  opacity: 0.9;
}

#morgen-calendar-tool .calendar-tool__morgen-tooltip-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
#morgen-calendar-tool .calendar-tool__toast {
  position: fixed;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-fast) var(--easing-ease-out),
              transform var(--duration-fast) var(--easing-ease-out);
  -webkit-user-select: none;
  user-select: none;
}

#morgen-calendar-tool .calendar-tool__toast[hidden] {
  display: none;
}

#morgen-calendar-tool .calendar-tool__toast--visible {
  opacity: 1;
  transform: translateY(0);
}

#morgen-calendar-tool .calendar-tool__toast-icon {
  color: var(--success);
  flex-shrink: 0;
}

#morgen-calendar-tool .calendar-tool__toast--error .calendar-tool__toast-icon {
  color: var(--error);
}

#morgen-calendar-tool .calendar-tool__toast-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   RESPONSIVE - TABLET (480px+)
   ============================================ */
@media (min-width: 480px) {
  #morgen-calendar-tool {
    padding: 16px; /* Minimal padding - host page provides spacing */
  }

  #morgen-calendar-tool .calendar-tool {
    padding: 0;
  }

  #morgen-calendar-tool .calendar-tool__form,
  #morgen-calendar-tool .calendar-tool__output {
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  /* Datetime row - horizontal */
  #morgen-calendar-tool .calendar-tool__datetime-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #morgen-calendar-tool .calendar-tool__datetime-block--date {
    flex: 1 1 100%;
  }

  #morgen-calendar-tool .calendar-tool__datetime-block--time {
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  #morgen-calendar-tool .calendar-tool__datetime-trigger {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Link cards - row layout */
  #morgen-calendar-tool .calendar-tool__link-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
  }

  #morgen-calendar-tool .calendar-tool__link-actions {
    width: auto;
    flex-shrink: 0;
  }

  #morgen-calendar-tool .calendar-tool__button--secondary,
  #morgen-calendar-tool .calendar-tool__button--tertiary {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* 2-column grid for output links */
  #morgen-calendar-tool .calendar-tool__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Input sizes */
  #morgen-calendar-tool .calendar-tool__input {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  #morgen-calendar-tool .calendar-tool__button--primary {
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Toast centered */
  #morgen-calendar-tool .calendar-tool__toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(10px);
    max-width: 320px;
  }

  #morgen-calendar-tool .calendar-tool__toast--visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================
   RESPONSIVE - DESKTOP (768px+)
   ============================================ */
@media (min-width: 768px) {
  #morgen-calendar-tool {
    padding: 16px; /* Minimal padding - host page provides spacing */
  }

  #morgen-calendar-tool .calendar-tool {
    max-width: 520px;
  }

  #morgen-calendar-tool .calendar-tool__form,
  #morgen-calendar-tool .calendar-tool__output {
    padding: 24px;
  }

  #morgen-calendar-tool .calendar-tool__datetime-trigger {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* Single column for links on desktop */
  #morgen-calendar-tool .calendar-tool__links {
    grid-template-columns: 1fr;
  }

  #morgen-calendar-tool .calendar-tool__input {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 14px;
  }

  #morgen-calendar-tool .calendar-tool__button--primary {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
  }

  #morgen-calendar-tool .calendar-tool__button--secondary,
  #morgen-calendar-tool .calendar-tool__button--tertiary {
    padding: 6px 10px;
    min-height: 32px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  #morgen-calendar-tool .calendar-tool__toast,
  #morgen-calendar-tool .calendar-tool__output,
  #morgen-calendar-tool .calendar-tool__link-card,
  #morgen-calendar-tool .calendar-tool__morgen-tooltip {
    transition: none;
  }

  #morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card {
    transition-delay: 0s;
  }

  #morgen-calendar-tool .calendar-tool__output--visible {
    opacity: 1;
    transform: none;
  }

  #morgen-calendar-tool .calendar-tool__output--visible .calendar-tool__link-card {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   COPY BUTTON COMPONENT
   ============================================ */
#morgen-calendar-tool .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md, 6px);
  padding: var(--button-padding, 3px 8px);
  border: 0;
  border-radius: var(--radius-default, 5px);
  background-color: var(--neutral-s00);
  color: var(--neutral-l01);
  font-family: var(--font-family);
  font-size: var(--text-base, 13px);
  font-weight: var(--font-medium, 500);
  line-height: var(--line-height-lg, 18px);
  cursor: pointer;
  box-shadow: var(--shadow-btn-secondary);
  transition: background-color var(--duration-default, 0.175s) ease,
              color var(--duration-default, 0.175s) ease;
  white-space: nowrap;
  user-select: none;
}

#morgen-calendar-tool .copy-btn:hover {
  background-color: var(--neutral-s01);
}

#morgen-calendar-tool .copy-btn--success {
  color: var(--success, #53C072);
}

#morgen-calendar-tool .copy-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

#morgen-calendar-tool .copy-btn__icon svg {
  width: 100%;
  height: 100%;
}

@keyframes copySuccessPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

#morgen-calendar-tool .copy-btn--success .copy-btn__icon {
  animation: copySuccessPop var(--duration-default, 0.175s) ease-out;
}

/* ============================================
   BRANDING FOOTER
   Visible, non-editable footer for Morgen attribution
   Displays below the description textarea
   ============================================ */
#morgen-calendar-tool .calendar-tool__branding-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: transparent;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  user-select: none;
  -webkit-user-select: none;
}

#morgen-calendar-tool .calendar-tool__branding-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

#morgen-calendar-tool .calendar-tool__branding-icon svg {
  width: 12px;
  height: 12px;
}

#morgen-calendar-tool .calendar-tool__branding-text {
  font-size: 11px;
  color: var(--neutral-l02);
  letter-spacing: var(--letter-spacing);
}

#morgen-calendar-tool .calendar-tool__branding-text a {
  color: var(--accent-lighter);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--duration-fast) var(--easing);
}

#morgen-calendar-tool .calendar-tool__branding-text a:hover {
  color: var(--accent);
  text-decoration: underline;
}

#morgen-calendar-tool .calendar-tool__branding-text a:focus {
  outline: none;
  color: var(--accent);
  text-decoration: underline;
}