/* Shared light-DOM web component styles. Loaded after tokens.css and before page styles. */

/* wy-copy-confirm */
wy-copy-confirm {
      display: block;
      position: fixed;
      left: 50%;
      width: min(80vw, 420px);
      bottom: calc(32px + env(safe-area-inset-bottom, 0px));
      z-index: 3000;
      pointer-events: none;
      opacity: 0;
      transform: translateX(-50%) translateY(16px) scale(0.98);
      transform-origin: 50% 100%;
      transition:
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
      will-change: transform, opacity;
    }

    wy-copy-confirm[show] {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
      pointer-events: auto;
    }

    @media (min-width: 640px) {
      wy-copy-confirm {
        width: min(80vw, 420px);
      }
    }

    wy-copy-confirm .container {
      background-color: var(--ink, #1A1A1A);
      color: var(--paper, #F7F4EE);
      padding: 16px;
      border-radius: 0;
      box-shadow:
        0 18px 48px -12px rgba(13, 13, 13, 0.45),
        0 6px 16px -6px rgba(13, 13, 13, 0.28);
    }

    wy-copy-confirm .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    wy-copy-confirm .title {
      margin: 0;
      color: var(--paper, #F7F4EE);
      font-family: var(--ff-sans, var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif));
      font-size: 18px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.005em;
    }

    wy-copy-confirm .close {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--paper, #F7F4EE);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      transition: background-color 160ms ease;
    }

    wy-copy-confirm .close:hover {
      background-color: color-mix(in srgb, var(--paper, #F7F4EE) 10%, transparent);
    }

    wy-copy-confirm .close:focus-visible,
    wy-copy-confirm .chip:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--paper, #F7F4EE) 62%, transparent);
      outline-offset: 2px;
    }

    wy-copy-confirm .ms {
      font-family: 'Material Symbols Outlined';
      font-size: 24px;
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-flex;
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    wy-copy-confirm .chips {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    @media (min-width: 640px) {
      wy-copy-confirm .chips {
        flex-direction: row;
        flex-wrap: wrap;
      }

      wy-copy-confirm .chip {
        flex: 1 1 0;
      }
    }

    wy-copy-confirm .chip {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      box-sizing: border-box;
      padding: 14px 18px;
      border: 0;
      border-radius: 999px;
      background-color: var(--paper, #F7F4EE);
      color: var(--ink, #1A1A1A);
      font-family: var(--ff-sans, var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif));
      font-size: 16px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.04em;
      text-decoration: none;
      cursor: pointer;
      transition:
        background-color 160ms ease,
        transform 160ms ease;
    }

    wy-copy-confirm .chip:hover {
      background-color: var(--paper-deep, #EEE8DD);
    }

    wy-copy-confirm .chip:active {
      transform: scale(0.98);
    }

    @media (prefers-reduced-motion: reduce) {
      wy-copy-confirm {
        transition: opacity 200ms linear;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

/* wy-filter-chip */
wy-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: var(--wy-filter-chip-padding, 5px 13px);
      min-height: var(--wy-filter-chip-min-height, 28px);
      box-sizing: border-box;
      border-radius: var(--wy-filter-chip-radius, var(--radius-pill, 999px));
      font-family: var(--wy-filter-chip-font-family, var(--font-sans, 'Inter', sans-serif));
      font-size: var(--wy-filter-chip-font-size, 11px);
      font-weight: var(--wy-filter-chip-font-weight, 500);
      cursor: pointer;
      transition:
        background-color var(--dur-1, 200ms) var(--ease),
        color var(--dur-1, 200ms) var(--ease),
        transform var(--dur-1, 200ms) var(--ease);
      
      /* Opaque background by default; overridden by variant */
      background-color: var(--wy-filter-chip-bg, var(--paper));
      border: 1px solid var(--wy-filter-chip-border, var(--paper-edge, #DDD6C8));
      color: var(--wy-filter-chip-text, var(--ink));
      box-shadow: none;
      
      user-select: none;
      white-space: nowrap;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    wy-filter-chip:hover:not([active]) {
      background-color: color-mix(in srgb, var(--ink, #1A1A1A) 6%, transparent);
      border-color: color-mix(in srgb, var(--ink, #1A1A1A) 25%, var(--paper-edge, #DDD6C8));
    }

    wy-filter-chip:focus-visible {
      outline: 2px solid var(--wy-filter-chip-focus, var(--ink, #282828));
      outline-offset: 2px;
    }

    wy-filter-chip[active] {
      background-color: var(--wy-filter-chip-active-bg, var(--ink, #282828));
      color: var(--wy-filter-chip-active-fg, var(--paper, #FFFFFF));
      border-color: var(--wy-filter-chip-active-bg, var(--ink, #1A1A1A));
      font-weight: var(--wy-filter-chip-font-weight-active, 500);
      box-shadow: none;
    }

    /* Soft variant: no border, wy-filter-chip Surface Variant background */
    wy-filter-chip[variant="soft"] {
      background-color: var(--wy-filter-chip-soft-bg, var(--paper-deep));
      border: none;
      border-width: 0;
    }

    wy-filter-chip .count {
      opacity: 0.7;
      font-size: 10px;
    }

    wy-filter-chip[active] .count {
      opacity: 0.85;
    }

/* wy-color-palette */
wy-color-palette {
            display: block;
            position: fixed;
            inset: 0;
            width: 100dvw;
            height: 100dvh;
            z-index: var(--wy-color-palette-z-index, 3000);
            pointer-events: none;
            font-family: var(--ff-sans, 'Inter', sans-serif);
        }

        wy-color-palette[open] {
            pointer-events: auto;
        }

        wy-color-palette .scrim {
            position: fixed;
            inset: 0;
            background: transparent;
            pointer-events: none;
        }

        wy-color-palette[open] .scrim {
            pointer-events: auto;
        }

        wy-color-palette .panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 320px;
            max-width: 100vw;
            background: var(--paper, #F7F4EE);
            border-left: 1px solid var(--paper-edge, #DDD6C8);
            box-shadow: var(--shadow-modal, -4px 0 32px rgba(0,0,0,0.14));
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform var(--dur-2, 350ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
            pointer-events: auto;
            overflow: hidden;
        }

        wy-color-palette[open] .panel {
            transform: translateX(0);
        }

        wy-color-palette .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--s-3, 12px) var(--s-4, 16px) var(--s-3, 12px) var(--s-5, 24px);
            border-bottom: 1px solid var(--paper-edge, #DDD6C8);
            flex-shrink: 0;
        }

        wy-color-palette .panel-title {
            font-family: var(--ff-serif, 'Lora', serif);
            font-style: italic;
            font-size: var(--fs-body-l, 16px);
            font-weight: 500;
            color: var(--ink, #1A1A1A);
            margin: 0;
        }

        wy-color-palette .close-btn {
            width: 32px;
            height: 32px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-pill, 9999px);
            color: var(--ink-mute, #6B6B6A);
            position: relative;
            overflow: hidden;
            transition: color var(--dur-1, 150ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
            flex-shrink: 0;
        }

        wy-color-palette .close-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--ink, #1A1A1A);
            opacity: 0;
            transition: opacity var(--dur-1, 150ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
            border-radius: inherit;
            pointer-events: none;
        }

        wy-color-palette .close-btn:hover::before { opacity: 0.06; }
        wy-color-palette .close-btn:hover { color: var(--ink, #1A1A1A); }

        wy-color-palette .close-btn:focus-visible {
            outline: 2px solid var(--ink, #1A1A1A);
            outline-offset: 2px;
        }

        wy-color-palette .panel-body {
            flex: 1;
            overflow-y: auto;
            padding: var(--s-4, 16px) var(--s-5, 24px);
            display: flex;
            flex-direction: column;
            gap: var(--s-5, 24px);
        }

        wy-color-palette .palette-row {
            display: flex;
            flex-direction: column;
            gap: var(--s-2, 8px);
        }

        wy-color-palette .palette-row-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--s-2, 8px);
        }

        wy-color-palette .palette-name {
            font-size: var(--fs-body-s, 13px);
            font-weight: 500;
            color: var(--ink, #1A1A1A);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        wy-color-palette .copy-palette-btn {
            width: 28px;
            height: 28px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-pill, 9999px);
            color: var(--ink-soft, #A8A49C);
            position: relative;
            overflow: hidden;
            transition: color var(--dur-1, 150ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
            flex-shrink: 0;
        }

        wy-color-palette .copy-palette-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--ink, #1A1A1A);
            opacity: 0;
            transition: opacity var(--dur-1, 150ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
            border-radius: inherit;
            pointer-events: none;
        }

        wy-color-palette .copy-palette-btn:hover::before { opacity: 0.06; }
        wy-color-palette .copy-palette-btn:hover { color: var(--ink, #1A1A1A); }

        wy-color-palette .copy-palette-btn:focus-visible {
            outline: 2px solid var(--ink, #1A1A1A);
            outline-offset: 2px;
        }

        wy-color-palette .copy-palette-btn.copied {
            color: var(--ok, #386A20);
        }

        wy-color-palette .chips-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-1, 4px);
        }

        wy-color-palette .chip {
            width: 20px;
            height: 20px;
            border-radius: var(--radius-1, 2px);
            border: 1px solid rgba(26, 26, 26, 0.12);
            cursor: pointer;
            flex-shrink: 0;
            position: relative;
            background: transparent;
            padding: 0;
            transition: transform var(--dur-1, 150ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
        }

        wy-color-palette .chip:hover {
            transform: scale(1.3);
            z-index: 1;
        }

        wy-color-palette .chip:active {
            transform: scale(1.1);
        }

        wy-color-palette .chip:focus-visible {
            outline: 2px solid var(--ink, #1A1A1A);
            outline-offset: 2px;
        }

        wy-color-palette .chip.copied {
            outline: 2px solid var(--ok, #386A20);
            outline-offset: 2px;
        }

        wy-color-palette .ms {
            font-family: 'Material Symbols Outlined';
            font-size: 18px;
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
            line-height: 1;
            display: inline-flex;
            user-select: none;
        }

        wy-color-palette .ms.sm {
            font-size: 16px;
        }

        wy-color-palette .state-msg {
            text-align: center;
            padding: var(--s-7, 48px) var(--s-4, 16px);
            color: var(--ink-mute, #6B6B6A);
            font-size: var(--fs-body-s, 13px);
        }

        @media (prefers-reduced-motion: reduce) {
            wy-color-palette .panel { transition: none; }
            wy-color-palette .chip  { transition: none; }
        }

        @media (max-width: 480px) {
            wy-color-palette .panel {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 65vh;
                transform: translateY(100%);
                border-left: none;
                border-top: 1px solid var(--paper-edge, #DDD6C8);
                border-radius: var(--radius-3, 16px) var(--radius-3, 16px) 0 0;
                box-shadow: 0 -4px 32px rgba(0,0,0,0.12);
            }
            wy-color-palette[open] .panel {
                transform: translateY(0);
            }
        }

/* wy-toast */
wy-toast {
      display: block;
      position: fixed;
      bottom: calc(32px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%) translateY(16px) scale(0.96);
      transform-origin: 50% 100%;
      z-index: 3000;
      pointer-events: none;
      transition:
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
      opacity: 0;
      will-change: transform, opacity;
    }

    wy-toast[show] {
      transform: translateX(-50%) translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      wy-toast .toast-container {
        background-color: rgba(26, 26, 26, 0.92);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      wy-toast {
        transition: opacity 180ms ease;
        transform: translateX(-50%) translateY(0) scale(1);
      }
      wy-toast[show] {
        opacity: 1;
      }
    }

    wy-toast .toast-container {
      background-color: rgba(26, 26, 26, 0.62);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      color: rgba(247, 244, 238, 0.96);
      padding: 14px 20px;
      border-radius: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow:
        inset 0 1px 0 rgba(247, 244, 238, 0.10),
        0 18px 48px -12px rgba(13, 13, 13, 0.45),
        0 6px 16px -6px rgba(13, 13, 13, 0.28);
      outline: 1px solid rgba(247, 244, 238, 0.12);
      outline-offset: -1px;
      max-width: min(420px, calc(100vw - 32px));
    }

    wy-toast .toast-container.has-actions {
      width: min(420px, calc(100vw - 32px));
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 16px 12px;
      padding: 16px;
    }

    wy-toast .icon {
      font-family: 'Material Symbols Outlined';
      font-size: 18px;
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'liga';
      flex-shrink: 0;
    }

    wy-toast .icon.variant-success {
      color: rgba(247, 244, 238, 0.72);
    }

    wy-toast .icon.variant-info {
      color: rgba(247, 244, 238, 0.72);
    }

    wy-toast .icon.variant-error {
      color: #E89B7E;
    }

    wy-toast .icon.variant-warning {
      color: #D9C28A;
    }

    wy-toast .message {
      font-family: var(--ff-sans, var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif));
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.005em;
      color: #FFFFFF;
    }

    wy-toast .toast-container.has-actions .icon.variant-success {
      display: none;
    }

    wy-toast .toast-container.has-actions .message {
      grid-column: 1;
      grid-row: 1;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.3;
    }

    wy-toast .actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    wy-toast .toast-container.has-actions .actions {
      grid-column: 1 / -1;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    wy-toast .action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 14px;
      border-radius: 0;
      background: rgba(247, 244, 238, 0.12);
      color: rgba(247, 244, 238, 0.96);
      font-family: 'Inter', var(--font-body, sans-serif);
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid rgba(247, 244, 238, 0.16);
    }

    wy-toast .toast-container.has-actions .action {
      min-height: 40px;
      padding: 0 14px;
      font-size: 0.8125rem;
      font-weight: 600;
      min-width: 0;
    }

    wy-toast .action:focus-visible {
      outline: 2px solid rgba(247, 244, 238, 0.72);
      outline-offset: 2px;
    }

    wy-toast .dismiss {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(247, 244, 238, 0.6);
      cursor: pointer;
      font: inherit;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    wy-toast .dismiss:hover {
      color: rgba(247, 244, 238, 0.96);
    }

    wy-toast .dismiss .icon {
      font-size: 18px;
    }

    wy-toast .toast-container.has-actions .dismiss {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      justify-self: end;
      width: 28px;
      height: 28px;
      transform: translate(4px, -4px);
    }

    wy-toast .dismiss:focus-visible {
      outline: 2px solid rgba(247, 244, 238, 0.72);
      outline-offset: 2px;
    }

    @media (max-width: 480px) {
      wy-toast .toast-container {
        width: calc(100vw - 32px);
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px 16px;
      }

      wy-toast .actions {
        order: 3;
        width: 100%;
        justify-content: center;
      }

      wy-toast .toast-container.has-actions {
        width: calc(100vw - 32px);
        grid-template-columns: 1fr auto;
        gap: 16px 12px;
        padding: 16px;
        justify-content: initial;
      }

      wy-toast .toast-container.has-actions .actions {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      wy-toast .toast-container.has-actions .action {
        min-height: 44px;
      }

      wy-toast .toast-container.has-actions .dismiss {
        width: 28px;
        height: 28px;
        transform: translate(4px, -4px);
      }
    }

/* wy-links-modal */
wy-links-modal {
      display: block;
      position: relative;
    }

    /* Material Symbols */
    wy-links-modal .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'liga';
    }

    /* Modal overlay - matches mockup backdrop */
    wy-links-modal .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: color-mix(in srgb, var(--ink) 9%, transparent);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem; /* p-4 from mockup */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--dur-2) var(--ease),
                  visibility var(--dur-2) var(--ease);
    }

    wy-links-modal[open] .modal-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    wy-links-modal[open] {
      display: block;
    }

    /* Modal container - matches mockup exactly */
    wy-links-modal .modal-container {
      position: relative;
      width: 100%;
      max-width: 56rem; /* max-w-4xl = 896px */
      max-height: 90vh; /* Constrain height to enable scrolling */
      background: var(--paper, #F7F4EE);
      border-radius: 0;
      box-shadow: var(--shadow-modal); /* shadow-2xl */
      overflow: hidden;
      border: 1px solid var(--paper-edge, #DDD6C8);
      transform: scale(0.95) translateY(20px);
      opacity: 0;
      transition: transform var(--dur-3) var(--ease),
                  opacity var(--dur-2) var(--ease);
      display: flex;
      flex-direction: column;
    }

    wy-links-modal[open] .modal-container {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    /* Content wrapper with padding - matches mockup p-8 */
    wy-links-modal .modal-content {
      padding: var(--spacing-xl, 2rem);
      padding-bottom: calc(var(--spacing-xl, 2rem) + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0; /* Allow shrinking below content size for scroll */
      overflow-y: auto;
      overflow-x: hidden;
    }

    @media (max-width: 600px) {
      wy-links-modal .modal-overlay {
        padding: 0;
        align-items: flex-end;
      }

      wy-links-modal .modal-container {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
      }

      wy-links-modal .modal-content {
        padding: var(--spacing-lg, 1.5rem);
        /* Extra padding for mobile browser controls (toolbar, home indicator) */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        height: 100%;
        box-sizing: border-box;
      }

      wy-links-modal .close-button {
        top: var(--spacing-lg, 1.5rem);
        right: var(--spacing-lg, 1.5rem);
      }

      wy-links-modal .modal-title {
        font-size: 1.75rem;
      }

      wy-links-modal .title-wrapper {
        margin-bottom: var(--spacing-xl, 2rem);
      }

      wy-links-modal .sections-container {
        gap: 2rem;
      }
    }

    /* Close button - matches mockup exactly */
    wy-links-modal .close-button {
      position: absolute;
      top: var(--spacing-xl, 2rem);
      right: var(--spacing-xl, 2rem);
      background: none;
      border: none;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--wy-links-modal-close-color, #A8A29E); /* stone-400 from reference */
      transition: color var(--dur-1) var(--ease);
      overflow: hidden;
      z-index: 10;
      border-radius: 50%;
    }

    wy-links-modal .close-button::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: var(--ink);
      opacity: 0;
      transition: opacity var(--dur-1) var(--ease);
      pointer-events: none;
    }

    wy-links-modal .close-button:hover::before {
      opacity: var(--state-hover-opacity);
    }

    wy-links-modal .close-button:hover {
      color: var(--ink); /* hover:text-primary */
    }

    wy-links-modal .close-button:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 2px;
    }

    wy-links-modal .close-button .material-symbols-outlined {
      font-size: 2rem; /* text-2xl */
      position: relative;
      z-index: 1;
    }

    /* Title wrapper with mb-12 */
    wy-links-modal .title-wrapper {
      margin-bottom: var(--spacing-2xl, 3rem);
      flex-shrink: 0; /* Title stays fixed, doesn't shrink */
    }

    /* Title - matches mockup exactly */
    wy-links-modal .modal-title {
      font-family: var(--font-serif); /* Lora */
      font-size: 2.25rem; /* text-4xl = 36px */
      font-weight: 500; /* font-medium */
      line-height: 1.2;
      color: var(--wy-links-modal-title-color, #1C1917); /* stone-900 from reference */
      margin: 0;
    }

    wy-links-modal .empty-state {
      color: var(--ink-mute);
      margin: 0;
      padding: var(--s-6, 32px);
      text-align: center;
    }

    /* Sections container - matches space-y-10 */
    wy-links-modal .sections-container {
      display: flex;
      flex-direction: column;
      gap: 2.5rem; /* 40px = 2.5rem */
    }

    /* Section */
    wy-links-modal .section {
      display: flex;
      flex-direction: column;
    }

    /* Section header - matches mockup exactly */
    wy-links-modal .section-header {
      font-family: var(--font-serif); /* Lora */
      font-size: 1.25rem; /* text-xl = 20px */
      font-weight: 500; /* font-medium */
      line-height: 1.2;
      color: var(--wy-links-modal-header-color, #292524); /* stone-800 from reference */
      margin: 0 0 1.25rem 0; /* 20px = 1.25rem */
    }

    /* Chips container - matches flex flex-wrap gap-3 */
    wy-links-modal .chips-container {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--spacing-sm, 0.5rem) * 1.5); /* 12px = 1.5 * 8px */
    }

    /* Link chip button - matches mockup exactly */
    wy-links-modal .link-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--spacing-sm, 0.5rem) * 1.25) var(--spacing-lg, 1.5rem); /* 10px 24px = 1.25 * 8px, 24px */
      border-radius: 0;
      font-family: var(--ff-sans, 'Inter', sans-serif);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 0.875rem; /* text-sm = 14px */
      font-weight: 500; /* font-medium */
      cursor: pointer;
      border: 1px solid var(--paper-edge, #DDD6C8);
      background-color: transparent;
      color: var(--wy-links-modal-chip-text-color, #44403C); /* stone-700 from reference */
      text-decoration: none;
      transition:
        transform var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease);
      position: relative;
      overflow: hidden;
    }

    /* Chip hover state layer */
    wy-links-modal .link-chip::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: color-mix(in srgb, var(--wy-button-primary-bg, var(--ink)) 15%, transparent);
      opacity: 0;
      transition: opacity var(--dur-1) var(--ease);
      pointer-events: none;
    }

    wy-links-modal .link-chip:hover::before {
      opacity: 1;
    }

    wy-links-modal .link-chip:hover {
      border-color: color-mix(in srgb, var(--ink, #1A1A1A) 40%, var(--paper-edge, #DDD6C8));
    }

    /* Chip pressed state */
    wy-links-modal .link-chip:active {
      transform: scale(0.97);
    }

    /* Focus state */
    wy-links-modal .link-chip:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 2px;
    }

    wy-links-modal .link-dropdown {
      position: relative;
      display: inline-flex;
    }

    wy-links-modal .link-chip--dropdown {
      gap: var(--spacing-xs, 0.25rem);
      padding-right: var(--spacing-md, 1rem);
    }

    wy-links-modal .link-chip__label,
    wy-links-modal .link-chip__icon {
      position: relative;
      z-index: 1;
    }

    wy-links-modal .link-chip__icon {
      font-size: 1.25rem;
      transition: transform var(--dur-1) var(--ease);
    }

    wy-links-modal .link-chip--dropdown[aria-expanded="true"] .link-chip__icon {
      transform: rotate(180deg);
    }

    wy-links-modal .link-menu {
      position: absolute;
      top: calc(100% + var(--spacing-xs, 0.25rem));
      left: 0;
      z-index: 20;
      min-width: 15rem;
      padding: var(--spacing-xs, 0.25rem);
      border: 1px solid var(--paper-edge, #DDD6C8);
      background: var(--paper, #F7F4EE);
      box-shadow: var(--shadow-modal);
    }

    wy-links-modal .link-menu__item {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: flex-start;
      min-height: 2.75rem;
      padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--wy-links-modal-chip-text-color, #44403C);
      cursor: pointer;
      font-family: var(--ff-sans, 'Inter', sans-serif);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-align: left;
      text-transform: uppercase;
      transition: background-color var(--dur-1) var(--ease);
    }

    wy-links-modal .link-menu__item:hover {
      background: color-mix(in srgb, var(--wy-button-primary-bg, var(--ink)) 12%, transparent);
    }

    wy-links-modal .link-menu__item:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: -3px;
    }

    @media (max-width: 600px) {
      wy-links-modal .link-dropdown {
        align-items: flex-start;
        flex-direction: column;
      }

      wy-links-modal .link-menu {
        position: static;
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - (var(--spacing-md, 1rem) * 2));
        margin-top: var(--spacing-xs, 0.25rem);
      }
    }

    /* Palette entry */
    wy-links-modal .palette-entry-section {
      padding-bottom: var(--spacing-lg, 24px);
      border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      margin-bottom: var(--spacing-lg, 24px);
    }

    wy-links-modal .palette-entry-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm, 8px);
      height: 40px;
      padding: 0 var(--spacing-md, 16px) 0 var(--spacing-sm, 8px);
      border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
      border-radius: var(--radius-pill, 999px);
      background: transparent;
      color: var(--ink, #1A1A1A);
      font-family: var(--ff-sans, 'Inter', sans-serif);
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 120ms ease;
    }

    wy-links-modal .palette-entry-btn:hover {
      background: color-mix(in srgb, var(--ink) 6%, transparent);
    }

    wy-links-modal .palette-entry-btn:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 2px;
    }

    wy-links-modal .palette-entry-btn .material-symbols-outlined {
      font-size: 20px;
      opacity: 0.7;
    }

/* wy-controls-bar */
wy-controls-bar {
      display: block;
      background-color: transparent;
      padding: var(--s-3, 12px) var(--s-7, 32px);
      width: 100%;
      box-sizing: border-box;
      position: relative;

      --wy-controls-floating-top: 16px;
      --wy-controls-floating-right: auto;
      --wy-controls-floating-left: 50%;
      --wy-controls-floating-z-index: 100;
      --wy-controls-floating-width: auto;
      --wy-controls-floating-max-width: min(900px, calc(100% - 32px));
      --wy-controls-return-duration: var(--dur-1, 150ms);
      --wy-controls-return-opacity-duration: 140ms;
      --wy-controls-radius: var(--radius-pill, 999px);
    }

    /* Bottom hairline */
    wy-controls-bar::after {
      content: '';
      position: absolute;
      left: var(--wy-controls-rule-inset, var(--s-7, 32px));
      right: var(--wy-controls-rule-inset, var(--s-7, 32px));
      bottom: 0;
      height: 1px;
      background: var(--paper-edge, #E8E2DA);
    }

    wy-controls-bar[data-scrolled] {
      position: fixed;
      top: var(--wy-controls-floating-top, 16px);
      left: var(--wy-controls-floating-left, 50%);
      transform: var(--wy-controls-floating-transform, translateX(-50%));
      z-index: var(--wy-controls-floating-z-index, 100);
      width: var(--wy-controls-floating-width, auto);
      max-width: var(--wy-controls-floating-max-width, min(900px, calc(100% - 32px)));
      background: var(--paper, #F7F4EE);
      border: 0;
      border-radius: 0;
      padding: var(--wy-controls-padding-scrolled, var(--s-2, 8px) var(--s-5, 24px));
      box-shadow: none;
      transition:
        top 300ms cubic-bezier(0.2, 0, 0, 1),
        transform 300ms cubic-bezier(0.2, 0, 0, 1),
        padding 300ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 300ms cubic-bezier(0.2, 0, 0, 1),
        opacity 200ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar[data-scrolled]::after {
      display: none;
    }

    wy-controls-bar[data-scroll-state="returning"] {
      opacity: 0.08;
      transform: var(--wy-controls-floating-return-transform, translateX(-50%) translateY(-4px) scale(0.995));
      box-shadow: none;
      transition:
        top var(--wy-controls-return-duration, 150ms) cubic-bezier(0.2, 0, 0, 1),
        transform var(--wy-controls-return-duration, 150ms) cubic-bezier(0.2, 0, 0, 1),
        padding var(--wy-controls-return-duration, 150ms) cubic-bezier(0.2, 0, 0, 1),
        box-shadow var(--wy-controls-return-duration, 150ms) cubic-bezier(0.2, 0, 0, 1),
        opacity var(--wy-controls-return-opacity-duration, 140ms) cubic-bezier(0.2, 0, 0, 1);
    }

    /* ---- Controls container ---- */
    wy-controls-bar .controls-container {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--s-5, 24px);
      max-width: 1600px;
      margin: 0 auto;
    }

    wy-controls-bar[data-scrolled] .controls-container {
      gap: var(--s-4, 16px);
      max-width: 100%;
    }

    /* ---- Search ---- */
    wy-controls-bar .search-section {
      flex: 0 0 auto;
      width: 260px;
      position: relative;
      transition: width 250ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar[data-scrolled] .search-section {
      width: 280px;
    }

    wy-controls-bar .search-input {
      width: 100%;
      height: 36px;
      padding: 0 var(--s-4, 16px) 0 40px;
      background: transparent;
      color: var(--ink, #1A1A1A);
      border: 1px solid var(--paper-edge, #DDD6C8);
      border-radius: var(--wy-controls-radius, 999px);
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 13px;
      font-weight: 400;
      outline: none;
      box-sizing: border-box;
      transition:
        background 150ms cubic-bezier(0.2, 0, 0, 1),
        border-color 150ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .search-input::placeholder {
      color: var(--ink-mute, #868685);
      font-weight: 300;
    }

    wy-controls-bar .search-input:hover {
      border-color: var(--ink-soft, #A8A49C);
    }

    wy-controls-bar .search-input:focus {
      background: transparent;
      border-color: var(--ink, #1A1A1A);
      box-shadow: none;
    }

    wy-controls-bar .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      font-size: 18px;
      line-height: 1;
      color: var(--ink-mute, #868685);
      pointer-events: none;
      user-select: none;
      transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .search-section:focus-within .search-icon {
      color: var(--ink, #282828);
    }

    wy-controls-bar .search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      display: none;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 50%;
      color: var(--ink-mute, #868685);
      cursor: pointer;
      padding: 0;
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      font-size: 16px;
      line-height: 1;
      transition: background 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .search-clear:hover {
      background: color-mix(in srgb, var(--ink, #282828) 8%, transparent);
      color: var(--ink, #282828);
    }

    wy-controls-bar .search-section.has-value .search-clear {
      display: flex;
    }

    /* ---- Divider ---- */
    wy-controls-bar .divider {
      width: 1px;
      height: 20px;
      background: var(--paper-edge, #E8E2DA);
      flex-shrink: 0;
    }

    /* ---- Toggles ---- */
    wy-controls-bar .toggle-section {
      display: flex;
      align-items: center;
      gap: var(--s-5, 24px);
      flex-shrink: 0;
    }

    wy-controls-bar[data-scrolled] .toggle-section {
      display: none;
    }

    /* View toggle pill */
    wy-controls-bar .view-toggle {
      display: inline-flex;
      align-items: center;
      background: transparent;
      border: 1px solid var(--paper-edge, #DDD6C8);
      border-radius: var(--wy-controls-radius, 999px);
      padding: 2px;
      height: 32px;
      box-sizing: border-box;
    }

    wy-controls-bar .view-btn {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: var(--wy-controls-radius, 999px);
      color: var(--ink-mute, #868685);
      cursor: pointer;
      padding: 0;
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      font-size: 16px;
      line-height: 1;
      transition: background 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .view-btn:hover {
      color: var(--ink, #282828);
    }

    wy-controls-bar .view-btn.active {
      background: var(--ink, #1A1A1A);
      color: var(--paper, #F7F4EE);
      box-shadow: none;
    }

    /* Details toggle (custom checkbox) */
    wy-controls-bar .details-toggle-control {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2, 8px);
      cursor: pointer;
      user-select: none;
    }

    wy-controls-bar .details-toggle-control input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    wy-controls-bar .toggle-track {
      width: 28px;
      height: 16px;
      background: var(--paper-edge, #E8E2DA);
      border-radius: 9999px;
      position: relative;
      flex-shrink: 0;
      transition: background 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .toggle-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      background: var(--white, #fff);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .details-toggle-control.is-on .toggle-track {
      background: var(--ink, #282828);
    }

    wy-controls-bar .details-toggle-control.is-on .toggle-thumb {
      transform: translateX(12px);
    }

    wy-controls-bar .toggle-label {
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute, #868685);
      white-space: nowrap;
    }

    wy-controls-bar .sort-control {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2, 8px);
      flex-shrink: 0;
    }

    wy-controls-bar .sort-label {
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute, #868685);
    }

    wy-controls-bar .sort-select {
      height: 32px;
      padding: 0 28px 0 12px;
      border: 1px solid var(--paper-edge, #DDD6C8);
      border-radius: var(--wy-controls-radius, 999px);
      background: var(--paper, #F7F4EE);
      color: var(--ink, #1A1A1A);
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      outline: none;
    }

    wy-controls-bar .sort-select:focus-visible {
      border-color: var(--ink, #1A1A1A);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink, #1A1A1A) 8%, transparent);
    }

    /* ---- Category chips ---- */
    wy-controls-bar .category-section {
      flex: 1 1 auto;
      min-width: 0;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--s-2, 8px);
    }

    wy-controls-bar .chips-track {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: var(--s-2, 8px);
      overflow-x: auto;
      padding: 2px 24px 2px 0;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
      mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    }

    wy-controls-bar .chips-track.is-chips-scrolled {
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
    }

    wy-controls-bar .chips-track::-webkit-scrollbar {
      display: none;
    }

    wy-controls-bar[data-scrolled] .category-section {
      flex: 0 1 auto;
      max-width: 600px;
      transition: max-width 300ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .chip {
      flex-shrink: 0;
      height: 28px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      color: var(--ink-mute, #6B6B6A);
      border: 1px solid var(--paper-edge, #DDD6C8);
      border-radius: var(--wy-controls-radius, 999px);
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      white-space: nowrap;
      cursor: pointer;
      transition:
        color 150ms cubic-bezier(0.2, 0, 0, 1),
        background 150ms cubic-bezier(0.2, 0, 0, 1),
        border-color 150ms cubic-bezier(0.2, 0, 0, 1),
        transform 150ms cubic-bezier(0.2, 0, 0, 1);
    }

    wy-controls-bar .chip:hover {
      color: var(--ink, #282828);
      border-color: color-mix(in srgb, var(--ink, #282828) 25%, var(--paper-edge, #E8E2DA));
      background: color-mix(in srgb, var(--ink, #282828) 3%, transparent);
    }

    wy-controls-bar .chip:active {
      transform: scale(0.98);
    }

    wy-controls-bar .chip.active {
      background: var(--ink, #282828);
      color: var(--paper, #FFFAF5);
      border-color: var(--ink, #282828);
    }

    wy-controls-bar .chip.active:hover {
      background: color-mix(in srgb, var(--ink, #282828) 92%, var(--paper, #FFFAF5));
    }

    /* Featured dot marker */
    wy-controls-bar .chip--featured::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.9;
      flex-shrink: 0;
    }

    wy-controls-bar .chip--hidden::before {
      content: 'visibility_off';
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
      font-size: 14px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      flex-shrink: 0;
    }

    /* ---- Mobile cancel button ---- */
    wy-controls-bar .mobile-cancel {
      flex: 0 0 auto;
      display: none;
      height: 36px;
      padding: 0 var(--s-2, 8px);
      background: transparent;
      border: none;
      font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink, #282828);
      cursor: pointer;
    }

    /* ---- Mobile (≤768px) ---- */
    @media (max-width: 768px) {
      wy-controls-bar {
        padding: var(--s-3, 12px) var(--s-4, 16px);
      }

      wy-controls-bar::after {
        left: var(--s-4, 16px);
        right: var(--s-4, 16px);
      }

      wy-controls-bar[data-scrolled] {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: var(--s-3, 12px) var(--s-4, 16px);
        background: transparent;
        box-shadow: none;
      }

      wy-controls-bar[data-scrolled]::after {
        display: block;
        left: var(--s-4, 16px);
        right: var(--s-4, 16px);
      }

      wy-controls-bar .controls-container {
        gap: var(--s-3, 12px);
      }

      wy-controls-bar .divider,
      wy-controls-bar .toggle-section {
        display: none;
      }

      wy-controls-bar .sort-label {
        display: none;
      }

      wy-controls-bar .sort-select {
        width: 96px;
        padding-left: 10px;
      }

      /* Collapsed: search is an icon button */
      wy-controls-bar .search-section {
        flex: 0 0 auto;
        width: 36px;
        transition:
          width 250ms cubic-bezier(0.2, 0, 0, 1),
          flex 250ms cubic-bezier(0.2, 0, 0, 1);
      }

      wy-controls-bar .search-input {
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        color: transparent;
        border-radius: var(--wy-controls-radius, 999px);
        font-size: 16px;
        cursor: pointer;
        transition:
          width 250ms cubic-bezier(0.2, 0, 0, 1),
          padding 250ms cubic-bezier(0.2, 0, 0, 1),
          background 250ms cubic-bezier(0.2, 0, 0, 1),
          color 150ms cubic-bezier(0.2, 0, 0, 1) 100ms,
          border-radius 250ms cubic-bezier(0.2, 0, 0, 1),
          border-color 150ms cubic-bezier(0.2, 0, 0, 1),
          box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
      }

      wy-controls-bar .search-input::placeholder {
        color: transparent;
        transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
      }

      wy-controls-bar .search-icon {
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--ink, #282828);
        transition:
          left 250ms cubic-bezier(0.2, 0, 0, 1),
          transform 250ms cubic-bezier(0.2, 0, 0, 1),
          color 150ms cubic-bezier(0.2, 0, 0, 1);
      }

      wy-controls-bar .search-clear,
      wy-controls-bar .search-section.has-value .search-clear {
        display: none;
      }

      /* Category section: flex fills remaining space */
      wy-controls-bar .category-section {
        flex: 1 1 auto;
        min-width: 0;
        transition:
          opacity 250ms cubic-bezier(0.2, 0, 0, 1),
          transform 250ms cubic-bezier(0.2, 0, 0, 1),
          max-width 250ms cubic-bezier(0.2, 0, 0, 1);
      }

      /* Search open state */
      wy-controls-bar[data-mobile-search] .search-section {
        flex: 1 1 auto;
        width: auto;
      }

      wy-controls-bar[data-mobile-search] .search-input {
        width: 100%;
        padding: 0 var(--s-4, 16px) 0 40px;
        background: transparent;
        color: var(--ink, #1A1A1A);
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: var(--wy-controls-radius, 999px);
        cursor: text;
      }

      wy-controls-bar[data-mobile-search] .search-input::placeholder {
        color: var(--ink-mute, #868685);
      }

      wy-controls-bar[data-mobile-search] .search-icon {
        left: 14px;
        transform: translate(0, -50%);
        color: var(--ink-mute, #868685);
      }

      wy-controls-bar[data-mobile-search] .search-section.has-value .search-clear {
        display: flex;
      }

      wy-controls-bar[data-mobile-search] .category-section {
        opacity: 0;
        max-width: 0;
        transform: translateX(12px);
        pointer-events: none;
        overflow: hidden;
      }

      wy-controls-bar[data-mobile-search] .sort-control {
        display: none;
      }

      wy-controls-bar[data-mobile-search] .mobile-cancel {
        display: inline-flex;
        align-items: center;
      }
    }

    /* ---- Tablet narrow (769–900px) ---- */
    @media (min-width: 769px) and (max-width: 900px) {
      wy-controls-bar .controls-container {
        flex-wrap: wrap;
        gap: var(--s-2, 8px) var(--s-1, 4px);
      }

      wy-controls-bar .search-section {
        flex: 1 1 auto;
        width: auto;
        min-width: 120px;
        max-width: 240px;
      }

      wy-controls-bar .divider { display: none; }

      wy-controls-bar .toggle-label { display: none; }

      wy-controls-bar .sort-label { display: none; }

      wy-controls-bar .toggle-section { gap: var(--s-2, 8px); }

      wy-controls-bar .category-section {
        flex: 0 0 100%;
        order: 1;
      }
    }

    /* ---- Tablet (901–1023px) ---- */
    @media (min-width: 901px) and (max-width: 1023px) {
      wy-controls-bar {
        padding: var(--s-2, 8px) var(--s-5, 24px);
      }

      wy-controls-bar .controls-container {
        gap: var(--s-2, 8px);
      }

      wy-controls-bar .search-section {
        width: 160px;
      }

      wy-controls-bar .toggle-section {
        gap: var(--s-3, 12px);
      }

      wy-controls-bar .toggle-label {
        display: none;
      }
    }

/* wy-prompt-modal */
/* Type (Lora serif / Inter sans) loads globally via tokens.css per The Nineteenth.
       Material Symbols should be loaded in the consuming page <head>:
       <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
    */

    /* Material Symbols base styling */
    wy-prompt-modal .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'liga';
    }

    wy-prompt-modal {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 2000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    wy-prompt-modal[open] {
      pointer-events: auto;
      opacity: 1;
    }

    wy-prompt-modal .scrim {
      position: absolute;
      inset: 0;
      background: rgba(40, 40, 40, 0.6); /* Solid ink scrim — no blur per Nineteenth */
    }

    wy-prompt-modal .modal-container {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90%;
      max-width: 800px;
      max-height: 90vh;
      background: var(--wy-prompt-modal-surface, var(--paper, #F7F4EE));
      border-radius: 0;
      box-shadow: var(--shadow-modal);
      transform: translate(-50%, -50%) scale(0.95);
      transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden; /* Clip content to border-radius */
      border: 1px solid var(--paper-edge, #DDD6C8);
      font-family: var(--ff-sans, 'Inter', sans-serif);
    }

    wy-prompt-modal .modal-container.visual-selector-modal {
      width: min(94vw, 1120px);
      max-width: 1120px;
    }

    wy-prompt-modal[open] .modal-container {
      transform: translate(-50%, -50%) scale(1);
    }

    wy-prompt-modal .modal-container.fullscreen {
      position: fixed;
      inset: 0;
      width: 100dvw;
      height: 100dvh;
      max-width: none;
      max-height: none;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      transform: translateY(4%);
    }

    wy-prompt-modal[open] .modal-container.fullscreen {
      transform: translateY(0);
    }

    /* the modal IS the screen — suppress the scrim beneath it */
    wy-prompt-modal:has(.modal-container.fullscreen) .scrim {
      opacity: 0;
      pointer-events: none;
    }

    wy-prompt-modal .modal-container.fullscreen .header {
      padding: calc(var(--spacing-2xl, 40px) + env(safe-area-inset-top, 0px)) var(--spacing-2xl, 48px) var(--spacing-sm, 8px);
    }

    /* HEADER STYLES */
    wy-prompt-modal .header {
      /* Inset the header to match the body/title padding (--spacing-xl) so the
         action buttons aren't flush to the modal's top-left corner. */
      padding: var(--spacing-xl, 32px) var(--spacing-xl, 32px) var(--spacing-sm, 8px);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md, 16px);
      flex-shrink: 0; /* Header stays fixed, doesn't shrink */
    }

    wy-prompt-modal .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        gap: 12px;
        padding: 0;
        /* Neutralize masthead-only styles leaking from the page `.header-top`
           (styles.css). In the modal this is not a sticky page header. */
        top: auto;
        z-index: auto;
        background: none;
        border-bottom: 0;
        color: inherit;
        font-size: inherit;
    }

    wy-prompt-modal .header-actions-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    wy-prompt-modal .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
    }

    /* Icon Button - Perfect circle with centered icon */
    wy-prompt-modal .icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.2s, transform 0.15s;
    }

    wy-prompt-modal .icon-btn.filled {
        background: transparent;
        color: var(--ink, #1A1A1A);
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: 0;
    }

    wy-prompt-modal .icon-btn.filled:hover {
        background: var(--ink, #1A1A1A);
        color: var(--paper, #F7F4EE);
    }

    wy-prompt-modal .icon-btn.primary {
        background: var(--ink, #1A1A1A);
        color: var(--paper, #F7F4EE);
        border-radius: 0;
    }

    wy-prompt-modal .icon-btn.primary:hover {
        opacity: 0.9;
        transform: scale(1.05);
    }

    wy-prompt-modal .icon-btn:disabled {
        opacity: 0.38;
        cursor: not-allowed;
    }

    wy-prompt-modal .icon-btn:disabled:hover {
        transform: none;
    }

    wy-prompt-modal .icon-btn .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
    }

    /* Labeled Button - Icon with text label */
    wy-prompt-modal .labeled-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 16px 0 12px;
        border-radius: 0;
        border: none;
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        transition: background-color 0.2s, transform 0.15s;
    }

    wy-prompt-modal .labeled-btn.primary {
        background: var(--ink, #1A1A1A);
        color: var(--paper, #F7F4EE);
        border-radius: 0;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 12px;
    }

    wy-prompt-modal .labeled-btn.primary:hover {
        opacity: 0.9;
        transform: scale(1.02);
    }

    wy-prompt-modal .labeled-btn .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

    wy-prompt-modal .header-main {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        margin-bottom: var(--spacing-lg, 24px);
    }

    /* Header-main inside content (for multi-step prompts) */
    wy-prompt-modal .content > .header-main {
        padding: var(--spacing-xl, 32px) var(--spacing-xl, 32px) var(--spacing-lg, 24px);
    }

    wy-prompt-modal .badge {
      display: none; /* Hidden on all screen sizes */
      padding: 4px 0;
      background: transparent;
      color: var(--ink-mute, #6B6B6A);
      border-radius: 0;
      font-family: var(--ff-serif, 'Lora', serif);
      font-style: italic;
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em; /* Wider tracking */
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none; /* Prevent badge from blocking clicks */
    }

    wy-prompt-modal .title-group h2 {
      font-family: var(--ff-serif, 'Lora', serif);
      font-size: 2.5rem; /* Larger Title */
      font-weight: 500;
      letter-spacing: -0.015em;
      margin: 0 0 12px 0;
      color: var(--ink);
      line-height: 1.1;
    }

    wy-prompt-modal .description-text {
      font-family: var(--ff-sans);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.6;
      color: var(--ink-mute);
      margin: 0;
    }

    wy-prompt-modal .description-text p { margin: 0 0 0.5em; }
    wy-prompt-modal .description-text p:last-child { margin-bottom: 0; }

    wy-prompt-modal .description-text ol,
    wy-prompt-modal .description-text ul {
      margin: 2px 0 0;
      padding-left: 1.4em;
    }

    wy-prompt-modal .description-text li + li {
      margin-top: 2px;
    }

    wy-prompt-modal .customize-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--ink, #1A1A1A);
        color: var(--paper, #F7F4EE);
        border: none;
        padding: 10px 20px;
        border-radius: 0;
        font-family: var(--ff-sans, 'Inter', sans-serif);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
        white-space: nowrap;
    }

    wy-prompt-modal .customize-btn:hover {
        opacity: 0.9;
    }

    /* TABS */
    wy-prompt-modal .tabs-container {
        padding: 0 var(--spacing-xl, 32px);
        display: flex;
        align-items: center;
        gap: var(--spacing-xl, 32px);
        flex-shrink: 0; /* Tabs stay fixed, don't shrink */
    }

    wy-prompt-modal .tabs-container wy-tabs {
        flex: 1;
    }

    wy-prompt-modal .clear-btn {
        background: none;
        border: none;
        color: var(--ink);
        font-family: var(--ff-sans);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 0;
        transition: background 0.2s;
        white-space: nowrap;
    }

    wy-prompt-modal .clear-btn:hover {
        background: var(--paper-edge);
    }

    wy-prompt-modal .clear-btn:focus-visible {
        outline: 3px solid var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
        outline-offset: 2px;
    }

    wy-prompt-modal .tab-item {
        background: none;
        border: none;
        padding: 12px 0 16px 0;
        font-family: var(--ff-sans);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--ink-mute);
        cursor: pointer;
        position: relative;
        transition: color 0.2s;
        margin: 0;
        border-bottom: 2px solid transparent;
    }

    wy-prompt-modal .tab-item:hover {
        color: var(--ink);
    }

    wy-prompt-modal .tab-item.active {
        color: var(--ink);
        font-weight: 600;
        border-bottom-color: var(--ink);
    }
    
    /* CONTENT */
    wy-prompt-modal .content {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    wy-prompt-modal .body {
        padding: var(--spacing-xl, 32px);
        flex: 1;
    }

    wy-prompt-modal .variation-selector-container {
        margin: var(--spacing-xl, 32px) var(--spacing-xl, 32px) 0;
        padding: var(--spacing-lg, 24px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg, 24px);
        background-color: var(--paper);
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: var(--radius-2, 0);
    }

    wy-prompt-modal .variation-selector-container wy-dropdown {
        width: 100%;
    }

    wy-prompt-modal .body > .variation-selector-container {
        margin: var(--spacing-xl, 32px) 0 0;
    }

    wy-prompt-modal .visual-selector-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
        gap: var(--spacing-lg, 24px);
        padding: 0 var(--spacing-xl, 32px) var(--spacing-xl, 32px);
        align-items: start;
    }

    wy-prompt-modal .visual-selector-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    wy-prompt-modal .visual-selector-main .header-main {
        margin-bottom: var(--spacing-md, 16px);
    }

    wy-prompt-modal .visual-selector-main .tabs-container {
        padding-left: 0;
        padding-right: 0;
    }

    wy-prompt-modal .visual-selector-main .body {
        padding: var(--spacing-lg, 24px) 0 0;
    }

    wy-prompt-modal .visual-selected-panel {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg, 24px);
        margin-top: var(--spacing-sm, 8px);
        margin-bottom: var(--spacing-lg, 24px);
    }

    wy-prompt-modal .visual-selector-rail {
        position: sticky;
        top: var(--spacing-md, 16px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm, 12px);
        max-height: calc(90vh - 128px);
        overflow: auto;
        padding: var(--spacing-md, 16px);
        background-color: var(--paper);
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: var(--radius-2, 0);
    }

    /* cap the reading column; let the rail stretch to fill what's left.
       Scoped to widths above the mobile breakpoint (600px) — these selectors
       are more specific than the `@media (max-width: 600px)` stacked-layout
       rules below, so without this guard they'd win on mobile too and force
       the two-column grid into a viewport too narrow to hold it. */
    @media (min-width: 601px) {
        wy-prompt-modal .modal-container.fullscreen .visual-selector-layout,
        wy-prompt-modal .modal-container.fullscreen.visual-selector-modal .visual-selector-layout {
            grid-template-columns: minmax(0, clamp(560px, 42vw, 860px)) minmax(280px, 1fr);
            padding: 0 var(--spacing-2xl, 48px) var(--spacing-2xl, 48px);
        }

        wy-prompt-modal .modal-container.fullscreen .visual-selector-rail {
            max-height: calc(100dvh - 96px);
        }

        wy-prompt-modal .modal-container.fullscreen .variation-image img {
            max-height: 38vh;
            object-fit: cover;
        }

        /* tiles reflow to fill the rail's available width rather than a fixed column count */
        wy-prompt-modal .modal-container.fullscreen .visual-selector-rail .visual-variation-grid {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }
    }

    wy-prompt-modal .variation-select-native {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: 56px;
        padding: 0 calc(var(--spacing-xl, 32px) + 20px) 0 var(--spacing-lg, 24px);
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: 0;
        background-color: var(--white, #FDFBF7);
        color: var(--ink, #1D1B20);
        font-family: var(--ff-sans);
        font-size: 0.9375rem;
        font-weight: 500;
        cursor: pointer;
    }

    wy-prompt-modal .variation-select-wrap {
        position: relative;
    }

    wy-prompt-modal .variation-select-wrap .material-symbols-outlined {
        position: absolute;
        right: var(--spacing-md, 16px);
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-mute, #49454E);
        pointer-events: none;
        font-size: 22px;
    }

    wy-prompt-modal .variation-select-native:focus-visible {
        outline: 3px solid var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
        outline-offset: 2px;
    }

    wy-prompt-modal .visual-variation-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
        gap: var(--spacing-sm, 12px);
    }

    wy-prompt-modal .visual-selector-rail .visual-variation-grid {
        grid-template-columns: 1fr;
    }

    wy-prompt-modal .visual-variation-tile {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 100%;
        padding: 0;
        background: transparent;
        color: var(--ink, #1D1B20);
        border: 0;
        border-radius: 0;
        cursor: pointer;
        position: relative;
        text-align: left;
        appearance: none;
        transition:
            opacity var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
    }

    wy-prompt-modal .visual-variation-tile:focus-visible {
        outline: 3px solid var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
        outline-offset: 2px;
    }

    wy-prompt-modal .visual-variation-tile.selected .visual-variation-media {
        opacity: 1;
    }

    wy-prompt-modal .visual-variation-media {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        background: linear-gradient(150deg, #E6E0D4, #CDC4B2);
        border: 0;
        transition: opacity var(--dur-2, 350ms) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
    }

    wy-prompt-modal .visual-variation-tile:hover .visual-variation-media {
        opacity: 0.9;
    }

    wy-prompt-modal .visual-variation-text-tile {
        display: flex;
        flex: 1;
        min-height: 104px;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-md, 16px);
        background: linear-gradient(150deg, #E6E0D4, #CDC4B2);
        border: 0;
    }

    wy-prompt-modal .visual-variation-text-tile .material-symbols-outlined {
        color: color-mix(in srgb, var(--ink, #282828) 46%, transparent);
        font-size: 30px;
    }

    wy-prompt-modal .visual-variation-copy {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs, 4px);
        padding: var(--spacing-sm, 12px);
        padding-top: 8px;
        margin-top: 10px;
        min-width: 0;
    }

    wy-prompt-modal .visual-variation-name {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--ink, #1A1A1A);
        font-family: var(--ff-serif);
        font-style: italic;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    wy-prompt-modal .visual-variation-mark {
        flex-shrink: 0;
        width: 5px;
        height: 5px;
        background: var(--ink, #1A1A1A);
    }

    wy-prompt-modal .visual-variation-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--ink-mute, #6B6B6A);
        font-family: var(--ff-sans);
        font-size: 0.75rem;
        line-height: 1.45;
    }

    wy-prompt-modal .visual-variation-tile.thumbnail-only.has-image .visual-variation-copy {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    wy-prompt-modal .variation-description-panel {
        margin-top: 0;
        --wy-info-panel-bg: transparent;
        --wy-info-panel-border: transparent;
        --wy-info-panel-padding: 0;
        --wy-info-panel-font-size: var(--fs-body-s, 0.875rem);
    }

    wy-prompt-modal .variation-image {
        margin: 0;
    }

    wy-prompt-modal .variation-image img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border: 1px solid var(--paper-edge, #DDD6C8);
    }

    wy-prompt-modal .variation-image figcaption {
        margin: 8px 0 0;
        color: var(--ink-mute, #6B6B6A);
        font-family: var(--ff-serif, 'Lora', serif);
        font-size: 0.8125rem;
        font-style: italic;
        line-height: 1.35;
        text-align: right;
    }

    wy-prompt-modal .reference-images-panel {
        margin: 0;
        --wy-info-panel-bg: transparent;
        --wy-info-panel-padding: 0;
        --wy-info-panel-font-size: var(--fs-body-s, 0.875rem);
    }

    wy-prompt-modal .reference-images-list {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--paper-edge, #DDD6C8);
        background: var(--paper, #F7F4EE);
    }

    wy-prompt-modal .reference-image-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--spacing-md, 16px);
        min-height: 96px;
        padding: var(--spacing-md, 16px);
    }

    wy-prompt-modal .reference-image-row + .reference-image-row {
        border-top: 1px solid var(--paper-edge, #DDD6C8);
    }

    wy-prompt-modal .reference-image-thumb {
        display: block;
        width: 72px;
        height: 72px;
        object-fit: cover;
        border: 1px solid var(--paper-edge, #DDD6C8);
        background: var(--white, #FFFFFF);
    }

    wy-prompt-modal .reference-image-meta {
        min-width: 0;
        padding-right: var(--spacing-xs, 8px);
    }

    wy-prompt-modal .reference-image-label {
        color: var(--ink, #1A1A1A);
        font-family: var(--ff-sans);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    wy-prompt-modal .reference-image-url {
        display: -webkit-box;
        margin-top: 6px;
        color: var(--ink-mute, #6B6B6A);
        font-family: var(--ff-sans);
        font-size: 0.75rem;
        line-height: 1.45;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: pre-line;
    }

    wy-prompt-modal .reference-variable {
        display: inline-block;
        margin-top: 6px;
        color: var(--ink-soft, #A8A49C);
        font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
        font-size: 0.6875rem;
        line-height: 1.35;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    wy-prompt-modal .reference-image-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    wy-prompt-modal .reference-image-copy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 36px;
        padding: 0 10px;
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: 0;
        background: transparent;
        color: var(--ink, #1A1A1A);
        font-family: var(--ff-sans);
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--dur-1, 150ms) var(--ease, ease),
          color var(--dur-1, 150ms) var(--ease, ease);
    }

    wy-prompt-modal .reference-image-copy:hover {
        background: var(--ink, #1A1A1A);
        color: var(--paper, #F7F4EE);
    }

    wy-prompt-modal .reference-image-copy:focus-visible {
        outline: 3px solid var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
        outline-offset: 2px;
    }

    wy-prompt-modal .reference-image-copy .material-symbols-outlined {
        font-size: 18px;
        line-height: 1;
    }

    wy-prompt-modal .variation-meta-section + .variation-meta-section {
        margin-top: var(--spacing-md, 16px);
        padding-top: var(--spacing-md, 16px);
        border-top: 1px solid var(--paper-edge, #DDD6C8);
    }

    wy-prompt-modal .prompt-instructions-panel {
        margin-top: 16px;
        --wy-info-panel-bg: transparent;
        --wy-info-panel-border: transparent;
        --wy-info-panel-padding: 0;
        --wy-info-panel-font-size: var(--fs-body-s, 0.875rem);
    }

    wy-prompt-modal .prompt-instructions-heading {
        margin: 0 0 var(--spacing-xxs, 4px);
        font-family: var(--ff-sans);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-soft, #A8A49C);
    }

    wy-prompt-modal .prompt-instructions-copy {
        margin: 0;
    }

    wy-prompt-modal .prompt-instructions-copy p { margin: 0 0 0.5em; }
    wy-prompt-modal .prompt-instructions-copy p:last-child { margin-bottom: 0; }

    wy-prompt-modal .prompt-instructions-copy ol,
    wy-prompt-modal .prompt-instructions-copy ul {
        margin: 2px 0 0;
        padding-left: 1.4em;
    }

    wy-prompt-modal .prompt-instructions-copy li + li {
        margin-top: 2px;
    }

    wy-prompt-modal .related-prompts {
        margin-top: 16px;
    }

    wy-prompt-modal .related-prompts-label {
        display: block;
        margin: 0 0 var(--spacing-xxs, 4px);
        font-family: var(--ff-sans);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-soft, #A8A49C);
    }

    wy-prompt-modal .related-prompts-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs, 8px);
    }

    wy-prompt-modal .related-prompt-button {
        padding: 6px 12px;
        border: 1px solid var(--paper-edge, #DDD);
        border-radius: var(--radius-pill);
        background: transparent;
        color: var(--ink);
        cursor: pointer;
        font-family: var(--ff-sans);
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
    }

    wy-prompt-modal .variation-description-heading {
        margin: 0 0 var(--spacing-xxs, 4px);
        font-family: var(--ff-sans);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-soft, #A8A49C);
    }

    wy-prompt-modal .variation-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm, 8px);
        width: 100%;
        margin: 0;
        min-height: 40px;
        padding: 0;
        background: none;
        border: 0;
        font-family: var(--ff-sans, 'Inter', sans-serif);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--ink);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
        cursor: pointer;
    }

    wy-prompt-modal .variation-name:focus-visible {
        outline: 3px solid var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
        outline-offset: 4px;
    }

    wy-prompt-modal .variation-name .material-symbols-outlined {
        flex: 0 0 auto;
        font-size: 20px;
        color: var(--ink-mute, #49454E);
        transition: transform 0.2s;
    }

    wy-prompt-modal .variation-name[aria-expanded="true"] .material-symbols-outlined {
        transform: rotate(180deg);
    }

    wy-prompt-modal .variation-details {
        margin-top: var(--spacing-sm, 8px);
    }

    wy-prompt-modal .variation-description-copy {
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--ink-mute);
    }

    wy-prompt-modal .variation-description-copy p { margin: 0 0 0.5em; }
    wy-prompt-modal .variation-description-copy p:last-child { margin-bottom: 0; }

    /* Selector styles for the compact variation fallback layout. */
    wy-prompt-modal .variation-selector {
        margin: 0 var(--spacing-xl, 32px) var(--spacing-md, 16px);
        padding: var(--spacing-sm, 12px);
        background: var(--paper);
        border-radius: var(--radius-2, 8px);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 12px);
    }

    wy-prompt-modal .variation-label {
        font-family: var(--ff-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-mute);
    }

    wy-prompt-modal .variation-select {
        font-family: var(--ff-sans);
        font-size: 0.875rem;
        color: var(--ink);
        background: transparent;
        border: 1px solid var(--paper-edge, #DDD6C8);
        border-radius: 0;
        padding: 6px 12px;
    }

    /* FORMS */
    wy-prompt-modal .variables-grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg, 24px);
    }

    wy-prompt-modal .form-group label {
        display: block;
        font-family: var(--ff-sans);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ink);
        margin-bottom: 8px;
    }

    wy-prompt-modal .form-group input, wy-prompt-modal .form-group textarea {
        width: 100%;
        box-sizing: border-box;
        padding: 16px; /* Increased padding for breathing room */
        border: 1px solid var(--paper-edge);
        border-radius: 0;
        font-family: var(--ff-sans);
        font-size: 1rem;
        color: var(--ink);
        background: var(--white);
        transition: all 0.2s;
    }

    wy-prompt-modal .form-group input:focus, wy-prompt-modal .form-group textarea:focus {
        outline: none;
        border-color: var(--ink);
        box-shadow: 0 0 0 2px var(--wy-prompt-modal-focus-ring, color-mix(in srgb, var(--ink) 18%, transparent));
    }

    wy-prompt-modal .helper-text {
        display: block;
        text-align: right;
        font-size: 0.75rem;
        color: var(--ink-mute);
        margin-top: 4px;
    }

    wy-prompt-modal .form-group wy-option-toggle {
      500 1rem/1.45 var(--ff-sans): 500 1rem/1.45 var(--ff-sans);
      display: block;
      width: 100%;
    }

    wy-prompt-modal .form-group wy-option-toggle .label {
      margin: 0 0 var(--spacing-xs, 4px) 0;
      color: var(--ink);
      font-family: var(--ff-sans);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    wy-prompt-modal .form-group wy-option-toggle .description {
      margin: 0;
      max-width: 36rem;
      color: color-mix(in srgb, var(--ink) 70%, transparent);
      font-family: var(--ff-sans);
      font-size: var(--fs-body-s, 0.875rem);
      font-weight: 400;
      line-height: 1.8;
    }

    wy-prompt-modal .form-group wy-option-toggle .group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-xxs, 2px);
      padding: var(--spacing-xxs, 2px);
      border-radius: var(--radius-pill, 9999px);
      background: var(--paper-edge, #DDD6C8);
    }

    wy-prompt-modal .form-group wy-option-toggle .option {
      position: relative;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-pill, 9999px);
      min-height: 34px;
      padding: var(--spacing-xs, 4px) var(--spacing-md, 16px);
      background: transparent;
      color: color-mix(in srgb, var(--ink-mute, #6B6B6A) 84%, transparent);
      font-family: var(--ff-sans);
      font-size: var(--fs-body-s, 0.875rem);
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
      transition:
        background-color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1)),
        color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
    }

    wy-prompt-modal .form-group wy-option-toggle .option::after {
      content: '';
      position: absolute;
      inset: 0;
      background: currentColor;
      opacity: 0;
      transition: opacity var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
      pointer-events: none;
    }

    wy-prompt-modal .form-group wy-option-toggle .option:hover::after {
      opacity: var(--state-hover-opacity, 0.08);
    }

    wy-prompt-modal .form-group wy-option-toggle .option.selected {
      background: var(--ink);
      color: var(--paper);
    }

    wy-prompt-modal .form-group wy-option-toggle .option:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--spacing-md, 16px);
      min-height: 38px;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-copy {
      min-width: 0;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-control {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm, 8px);
      justify-self: end;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-state {
      min-width: 2.5rem;
      text-align: right;
      font-family: var(--ff-sans);
      font-size: 0.625rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
      user-select: none;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button {
      appearance: none;
      position: relative;
      overflow: hidden;
      border: 0;
      padding: 0;
      flex: 0 0 auto;
      width: 52px;
      height: 30px;
      border-radius: var(--radius-pill, 9999px);
      background: var(--wy-option-toggle-off-bg, var(--paper-deep));
      cursor: pointer;
      transition: background-color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button.checked {
      background: var(--ink);
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button::after {
      content: '';
      position: absolute;
      inset: 0;
      background: currentColor;
      opacity: 0;
      transition: opacity var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
      pointer-events: none;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button:hover::after {
      opacity: var(--state-hover-opacity, 0.08);
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: var(--radius-pill, 9999px);
      background: var(--ink);
      transition:
        transform var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1)),
        background-color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
    }

    wy-prompt-modal .form-group wy-option-toggle .switch-button.checked .switch-thumb {
      transform: translateX(22px);
      background: var(--paper);
    }

    wy-prompt-modal .form-group wy-option-toggle .selected-value-text {
      margin: var(--spacing-sm, 8px) 0 0 0;
      color: color-mix(in srgb, var(--ink) 86%, transparent);
      font-family: var(--ff-sans);
      font-size: var(--fs-body-s, 0.875rem);
      font-weight: 400;
      line-height: 1.7;
    }

    wy-prompt-modal .preview-area {
      background: var(--paper-edge);
      border-radius: 0;
      padding: 24px;
      font-family: var(--ff-sans);
      font-size: 1rem;
      line-height: 1.7;
      color: var(--ink);
      border: 1px solid var(--paper-edge);
    }

    /* Markdown element styles within preview-area */
    wy-prompt-modal .preview-area p { margin: 0 0 1em; }
    wy-prompt-modal .preview-area p:last-child { margin-bottom: 0; }
    wy-prompt-modal .preview-area h1, wy-prompt-modal .preview-area h2, wy-prompt-modal .preview-area h3,
    wy-prompt-modal .preview-area h4, wy-prompt-modal .preview-area h5, wy-prompt-modal .preview-area h6 {
      font-family: var(--ff-sans);
      font-weight: 600;
      line-height: 1.3;
      margin: 1.2em 0 0.4em;
      color: var(--ink);
    }
    wy-prompt-modal .preview-area h1:first-child, wy-prompt-modal .preview-area h2:first-child,
    wy-prompt-modal .preview-area h3:first-child { margin-top: 0; }
    wy-prompt-modal .preview-area h1 { font-size: 1.4rem; }
    wy-prompt-modal .preview-area h2 { font-size: 1.2rem; }
    wy-prompt-modal .preview-area h3 { font-size: 1.05rem; }
    wy-prompt-modal .preview-area h4, wy-prompt-modal .preview-area h5, wy-prompt-modal .preview-area h6 { font-size: 1rem; }
    wy-prompt-modal .preview-area ul, wy-prompt-modal .preview-area ol {
      margin: 0 0 1em;
      padding-left: 1.5em;
    }
    wy-prompt-modal .preview-area li + li { margin-top: 0.25em; }
    wy-prompt-modal .preview-area blockquote {
      margin: 0 0 1em;
      padding: 0.5em 1em;
      border-left: 3px solid var(--paper-edge);
      color: var(--ink-mute, #6B6760);
      font-style: italic;
    }
    wy-prompt-modal .preview-area code {
      font-family: 'DM Mono', 'Fira Code', monospace;
      font-size: 0.875em;
      background: var(--paper-deep);
      padding: 0.1em 0.35em;
      border-radius: 3px;
    }
    wy-prompt-modal .preview-area pre {
      background: var(--paper-deep);
      padding: 1em;
      border-radius: 6px;
      overflow-x: auto;
      margin: 0 0 1em;
    }
    wy-prompt-modal .preview-area pre code {
      background: none;
      padding: 0;
      font-size: 0.875rem;
    }
    wy-prompt-modal .preview-area hr {
      border: none;
      border-top: 1px solid var(--paper-edge);
      margin: 1.2em 0;
    }
    wy-prompt-modal .preview-area table {
      border-collapse: collapse;
      width: 100%;
      margin: 0 0 1em;
      font-size: 0.9rem;
    }
    wy-prompt-modal .preview-area th, wy-prompt-modal .preview-area td {
      text-align: left;
      padding: 6px 12px;
      border: 1px solid var(--paper-edge);
    }
    wy-prompt-modal .preview-area th {
      background: var(--paper-deep);
      font-weight: 600;
    }
    wy-prompt-modal .preview-area a {
      color: var(--ink);
      text-decoration: underline;
    }
    wy-prompt-modal .preview-area strong { font-weight: 600; }
    wy-prompt-modal .preview-area em { font-style: italic; }

    wy-prompt-modal .overview::after {
      content: '';
      display: block;
      clear: both;
    }

    wy-prompt-modal .overview-eyebrow {
      display: block;
      margin-bottom: 14px;
      color: var(--ink-soft, #A8A49C);
      font-family: var(--ff-sans);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    wy-prompt-modal .overview-figures {
      float: right;
      display: grid;
      gap: 12px;
      margin: 2px 0 14px 28px;
    }

    wy-prompt-modal .overview-figures-pair {
      grid-template-columns: repeat(2, minmax(0, 206px));
    }

    wy-prompt-modal .overview-figures-single {
      grid-template-columns: minmax(0, 206px);
    }

    wy-prompt-modal .overview-figure {
      min-width: 0;
      margin: 0;
    }

    wy-prompt-modal .overview-figure img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border: 1px solid var(--paper-edge, #DDD6C8);
    }

    wy-prompt-modal .overview-figure figcaption {
      margin: 8px 0 0;
      color: var(--ink-mute, #6B6B6A);
      font-family: var(--ff-serif, 'Lora', serif);
      font-size: 0.8125rem;
      font-style: italic;
      line-height: 1.35;
      text-align: right;
    }

    wy-prompt-modal .overview-lead {
      margin: 0;
      color: var(--ink, #1A1A1A);
      font-family: var(--ff-serif, 'Lora', serif);
      font-size: 1.375rem;
      font-weight: 400;
      line-height: 1.5;
    }

    wy-prompt-modal .overview-lead p { margin: 0 0 0.75em; }
    wy-prompt-modal .overview-lead p:last-child { margin-bottom: 0; }

    wy-prompt-modal .overview-lead ol,
    wy-prompt-modal .overview-lead ul {
      margin: 4px 0 0;
      padding-left: 1.25em;
    }

    wy-prompt-modal .editor-area {
        width: 100%;
        height: 100%;
        min-height: 300px;
        border: none;
        background: none;
        resize: none;
        font-family: monospace;
        font-size: 0.9rem;
        color: var(--ink);
    }
    wy-prompt-modal .editor-area:focus { outline: none; }

    /* WY-INFO-PANEL THEMING */
    wy-prompt-modal wy-info-panel {
        --wy-info-panel-padding: var(--spacing-md, 16px);
        --wy-info-panel-font-size: var(--fs-body-s, 0.875rem);
    }

    wy-prompt-modal wy-info-panel[variant="compact"],
    wy-prompt-modal wy-info-panel.step-instructions {
        --wy-info-panel-compact-bg: var(--ink, #26211C);
        --wy-info-panel-compact-border: var(--ink, #26211C);
        --wy-info-panel-text-color: var(--paper, #F7F4EE);
        --wy-info-panel-compact-padding: var(--spacing-md, 16px);
    }

    /* STEP NAVIGATION BUTTONS (for multi-step prompts) */
    wy-prompt-modal .secondary-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: transparent;
        border: 1px solid var(--ink, #1A1A1A);
        color: var(--ink, #1A1A1A);
        padding: 12px 24px;
        border-radius: 0;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-family: var(--ff-sans);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    wy-prompt-modal .secondary-btn:hover {
        background: var(--paper-edge);
        border-color: var(--paper-edge);
    }

    /* STEPPER STYLES */
    wy-prompt-modal .stepper-container {
      position: sticky;
      top: 0;
      background: var(--wy-prompt-modal-surface, var(--paper));
      z-index: 10;
      margin-bottom: var(--spacing-md, 16px);
    }

    wy-prompt-modal .stepper-progress {
      height: 4px;
      background: var(--paper-edge);
      border-radius: var(--radius-0);
      overflow: hidden;
      margin-bottom: var(--spacing-md, 16px);
    }

wy-prompt-modal .stepper-progress-bar {
  height: 100%;
  width: var(--step-progress, 0%);
  background: var(--ink);
  transition: width var(--dur-2, 300ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
}

    wy-prompt-modal .stepper-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    wy-prompt-modal .stepper-label {
      font-family: var(--ff-sans);
      font-size: var(--fs-ui-xs, 0.75rem);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink);
      font-weight: 500;
    }

    wy-prompt-modal .stepper-nav {
      display: flex;
      gap: var(--spacing-xs, 4px);
    }

    wy-prompt-modal .step-instructions {
        margin-bottom: var(--spacing-lg, 24px);
    }

    wy-prompt-modal .step-instructions .panel-heading {
        color: var(--paper, #F7F4EE);
        font-size: 1.5em;
        line-height: 1.2;
        margin-bottom: var(--spacing-sm, 8px);
    }

    wy-prompt-modal .step-instructions-copy p {
        margin: 0 0 0.65em;
    }

    wy-prompt-modal .step-instructions-copy p:last-child {
        margin-bottom: 0;
    }

    wy-prompt-modal .step-instructions-copy ol,
    wy-prompt-modal .step-instructions-copy ul {
        margin: 0.35em 0 0;
        padding-left: 1.35em;
    }

    wy-prompt-modal .step-instructions-copy li + li {
        margin-top: 0.25em;
    }

    wy-prompt-modal .tabs-header {
      display: flex;
      gap: 24px;
      padding-top: var(--spacing-xl, 32px);
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid var(--paper-edge);
      margin-bottom: var(--spacing-lg, 24px);
    }

    wy-prompt-modal .tab-item {
      background: none;
      border: none;
      padding: 8px 0;
      font-family: var(--ff-sans);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--ink-mute);
      cursor: pointer;
      position: relative;
      transition: color 0.2s;
      border-bottom: 2px solid transparent;
    }

    wy-prompt-modal .tab-item:hover {
      color: var(--ink);
    }

    wy-prompt-modal .tab-item.active {
      color: var(--ink);
      font-weight: 700;
      border-bottom-color: var(--ink);
    }

    @media (max-width: 600px) {
      wy-prompt-modal .modal-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
      }
      wy-prompt-modal .header { padding: var(--spacing-lg, 24px) var(--spacing-md, 16px) var(--spacing-sm, 8px); }
      wy-prompt-modal .header-top { align-items: flex-start; }
      wy-prompt-modal .header-main { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm, 8px); margin-bottom: var(--spacing-sm, 8px); }
      wy-prompt-modal .header-actions-left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
      wy-prompt-modal .labeled-btn { min-width: 0; }
      wy-prompt-modal .labeled-btn.primary { padding-right: 12px; }
      wy-prompt-modal .reference-image-row {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 72px;
        gap: var(--spacing-sm, 12px);
        padding: var(--spacing-sm, 12px);
      }
      wy-prompt-modal .reference-image-thumb {
        width: 56px;
        height: 56px;
      }
      wy-prompt-modal .reference-image-meta {
        padding-right: 0;
      }
      wy-prompt-modal .reference-image-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }
      wy-prompt-modal .title-group h2 { font-size: 1.75rem; }
      wy-prompt-modal .tabs-container { padding: 0; } /* wy-tabs handles its own mobile padding */
      wy-prompt-modal .variation-selector-container {
        margin: var(--spacing-sm, 8px) var(--spacing-md, 16px) 0;
        padding: var(--spacing-sm, 12px);
        gap: var(--spacing-sm, 8px);
      }
      wy-prompt-modal .visual-selector-layout {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 16px);
        padding: 0 var(--spacing-md, 16px) var(--spacing-md, 16px);
      }
      wy-prompt-modal .visual-selector-rail {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
        padding: var(--spacing-sm, 12px);
      }
      wy-prompt-modal .visual-selector-rail .visual-variation-grid {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
      }
      wy-prompt-modal .visual-selector-main .body {
        padding-top: var(--spacing-md, 16px);
      }
      wy-prompt-modal .visual-variation-grid {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
      }
      wy-prompt-modal .visual-variation-text-tile {
        min-height: 86px;
      }
      wy-prompt-modal .visual-variation-copy {
        padding: var(--spacing-xs, 8px);
      }
      wy-prompt-modal .variation-description-heading {
        font-size: 0.6875rem;
      }
      wy-prompt-modal .body { padding: var(--spacing-md, 16px); }
      
      /* Tighter button spacing on mobile */
      wy-prompt-modal .header-actions-left {
        gap: 4px;
      }

      wy-prompt-modal .overview-figures {
        float: none;
        width: 100%;
        margin: 0 0 var(--spacing-md, 16px);
      }

      wy-prompt-modal .overview-figures-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      wy-prompt-modal .overview-figures-single {
        grid-template-columns: minmax(0, 1fr);
      }

      wy-prompt-modal .overview-figure img {
        aspect-ratio: 16 / 9;
        max-height: 220px;
      }

      wy-prompt-modal .overview-lead {
        font-size: 1.125rem;
      }

      /* Mobile description toggle */
      wy-prompt-modal .title-group h2 {
        cursor: pointer;
      }
      
      wy-prompt-modal .description-text {
        display: none;
      }
      
      wy-prompt-modal .description-text.expanded {
        display: block;
      }
      
      /* Step navigation styles (for multi-step prompts) */
      wy-prompt-modal .step-navigation {
        flex-direction: row;
        gap: 12px;
      }
      wy-prompt-modal .step-navigation .secondary-btn {
        flex: 1;
        min-width: 0;
      }
    }

/* wy-info-panel */
/* Type resolves to Lora/Inter via tokens.css (The Nineteenth). */

        wy-info-panel {
            display: block;
            --wy-info-panel-bg: var(--paper-deep);
            --wy-info-panel-border: var(--paper-edge);
            --wy-info-panel-text-color: var(--ink-mute);
            --wy-info-panel-compact-bg: var(--paper-edge);
            --wy-info-panel-compact-border: var(--paper-edge, #DDD);
            --wy-info-panel-padding: var(--s-5, 24px);
            --wy-info-panel-compact-padding: var(--s-4, 16px);
            --wy-info-panel-font-size: var(--fs-body-s);
        }
        
        wy-info-panel .panel {
            background-color: var(--wy-info-panel-bg);
            border: 1px solid var(--wy-info-panel-border, var(--paper-edge, #DDD6C8));
            border-radius: 0;
            padding: var(--wy-info-panel-padding);
            color: var(--wy-info-panel-text-color);
            font-family: var(--ff-sans, 'Inter', sans-serif);
            font-size: var(--wy-info-panel-font-size);
            line-height: 1.6;
            transition: background-color var(--dur-1, 200ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
        }
        
        wy-info-panel .panel p {
            margin: 0;
        }
        
        wy-info-panel .panel p + p {
            margin-top: var(--spacing-md, 16px);
        }
        
        wy-info-panel .panel.compact {
            padding: var(--wy-info-panel-compact-padding);
            background-color: var(--wy-info-panel-compact-bg);
            border-color: var(--wy-info-panel-compact-border, var(--paper-edge, #DDD6C8));
        }
        
        wy-info-panel .panel-heading {
            font-family: var(--ff-serif, 'Lora', 'Playfair Display', serif);
            font-size: var(--fs-body, 1rem);
            color: var(--ink);
            margin: 0;
            font-weight: 500;
        }
        
    /* Support for slotted content */
    wy-info-panel * {
        color: var(--wy-info-panel-text-color);
        font-family: var(--ff-sans, 'Inter', sans-serif);
    }
    
    wy-info-panel p {
        margin: 0;
    }
    
    wy-info-panel p + p {
        margin-top: var(--spacing-md, 16px);
    }

/* wy-tabs */
wy-tabs {
      display: block;
      border-bottom: 1px solid var(--paper-edge);
    }

    wy-tabs .tabs-list {
      display: flex;
      gap: 32px; /* Wider gap for cleaner look */
      padding: 0 32px; /* Align with modal content padding */
    }

    wy-tabs .tab-item {
      padding: 12px 0 16px 0; /* More bottom padding for visual balance */
      font-family: var(--ff-sans, 'Inter', sans-serif);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--ink-mute);
      cursor: pointer;
      position: relative;
      transition: color 0.2s;
      background: none;
      border: none;
      margin: 0;
    }

    wy-tabs .tab-item:hover {
      color: var(--ink);
    }

    wy-tabs .tab-item.active {
      color: var(--ink);
      font-family: var(--ff-sans, 'Inter', sans-serif);
      font-style: normal;
      font-weight: 600;
    }

    wy-tabs .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px; /* Overlap the border-bottom */
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--ink);
    }

    /* Responsive padding to match page/modal gutters */
    @media (max-width: 600px) {
      wy-tabs .tabs-list {
        padding: 0 16px;
        gap: 24px;
      }
    }

/* wy-button */
/* Fonts are loaded globally via tokens.css and page Material Symbols links. */

    wy-button {
      display: inline-block;
    }

    wy-button[full-width] {
      display: block;
      width: 100%;
    }

    wy-button[full-width] .button {
      width: 100%;
      justify-content: center;
    }

    wy-button[disabled] {
      pointer-events: none;
    }

    wy-button .button {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      border: none;
      cursor: pointer;
      text-decoration: none;
      font-family: var(--font-sans);
      font-weight: var(--wy-button-font-weight, 500);
      text-transform: uppercase;
      letter-spacing: var(--wy-button-tracking-architectural, 0.18em);
      font-size: 0.75rem;
      border-radius: var(--wy-button-radius, var(--radius-pill, 999px));
      transition: 
        transform var(--dur-1) var(--ease),
        box-shadow var(--dur-1) var(--ease),
        background-color var(--dur-1) var(--ease);
    }

    /* State layer for hover/focus/pressed */
    wy-button .button::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity var(--dur-1) var(--ease);
      pointer-events: none;
      border-radius: inherit;
    }

    /* Focus visible outline */
    wy-button .button:focus-visible {
      outline: 2px solid var(--ink, #1A1A1A);
      outline-offset: 2px;
    }

    /* ===== SIZE VARIANTS ===== */
    
    /* Large: 56px height */
    wy-button .button.size-large {
      height: 56px;
      padding: 16px 40px;
      font-size: 1rem;
    }

    wy-button .button.size-large .icon {
      font-size: 18px;
    }

    /* Medium: 44px height (default) */
    wy-button .button.size-medium {
      height: 44px;
      padding: 10px 32px;
      font-size: 0.875rem;
    }

    wy-button .button.size-medium .icon {
      font-size: 16px;
    }

    /* Small: 32px height */
    wy-button .button.size-small {
      height: 32px;
      padding: 6px 20px;
      font-size: 0.75rem;
    }

    wy-button .button.size-small .icon {
      font-size: 14px;
    }

    /* ===== PRIMARY VARIANT (Filled Hunter Green) ===== */
    wy-button .button.variant-primary {
      background-color: var(--wy-button-primary-bg);
      color: var(--wy-button-primary-fg);
    }

    wy-button .button.variant-primary::before {
      background-color: var(--wy-button-primary-fg);
    }

    wy-button .button.variant-primary:hover:not(:disabled) {
      background-color: var(--wy-button-primary-hover-bg);
      box-shadow: var(--wy-button-primary-shadow-hover);
      
    }

    wy-button .button.variant-primary:hover:not(:disabled)::before {
      opacity: var(--state-hover-opacity);
    }

    wy-button .button.variant-primary:active:not(:disabled) {
      transform: translateY(0);
    }

    wy-button .button.variant-primary:active:not(:disabled)::before {
      opacity: var(--state-pressed-opacity);
    }

    /* ===== SECONDARY VARIANT (Tonal - Warm Clay / Serif) ===== */
    wy-button .button.variant-secondary {
      background-color: var(--wy-button-secondary-bg);
      color: var(--wy-button-secondary-fg);
      /* font-family: var(--font-serif); Removed in favor of sans-serif */
    }

    wy-button .button.variant-secondary::before {
      background-color: var(--ink);
    }

    wy-button .button.variant-secondary:hover:not(:disabled) {
      background-color: var(--wy-button-secondary-hover-bg);
    }

    wy-button .button.variant-secondary:hover:not(:disabled)::before {
      opacity: var(--state-hover-opacity);
    }

    wy-button .button.variant-secondary:active:not(:disabled)::before {
      opacity: var(--state-pressed-opacity);
    }

    /* ===== OUTLINED VARIANT (Editorial) ===== */
    wy-button .button.variant-outlined {
      background-color: var(--wy-button-outlined-bg);
      color: var(--wy-button-outlined-fg);
      border: 1px solid var(--wy-button-outlined-border);
      /* font-family: var(--font-serif); Removed in favor of sans-serif */
    }

    wy-button .button.variant-outlined::before {
      background-color: var(--wy-button-secondary-bg);
    }

    wy-button .button.variant-outlined:hover:not(:disabled) {
      background-color: var(--wy-button-outlined-hover-bg);
    }

    wy-button .button.variant-outlined:hover:not(:disabled)::before {
      opacity: 0.3;
    }

    wy-button .button.variant-outlined:active:not(:disabled)::before {
      opacity: 0.5;
    }

    /* ===== TEXT VARIANT (Utility - ALL CAPS) ===== */
    wy-button .button.variant-text {
      background-color: transparent;
      color: var(--wy-button-text-fg);
      font-weight: 700;
    }

    wy-button .button.variant-text::before {
      background-color: var(--ink);
    }

    wy-button .button.variant-text.muted {
      color: var(--wy-button-text-fg-muted);
    }

    wy-button .button.variant-text:hover:not(:disabled) {
      background-color: var(--wy-button-text-hover-bg);
      color: var(--wy-button-text-fg);
    }

    wy-button .button.variant-text:hover:not(:disabled)::before {
      opacity: 0;
    }

    /* Text variant with leading indicator dot */
    wy-button .button.variant-text .indicator-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: color-mix(in srgb, currentColor 30%, transparent);
    }

    /* ===== DISABLED STATE ===== */
    wy-button .button:disabled {
      opacity: var(--state-disabled-opacity);
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    /* ===== ICON STYLING ===== */
    wy-button .icon {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'liga';
    }

    /* Content wrapper for proper ordering */
    wy-button .content {
      display: contents;
    }

/* wy-modal */
wy-modal {
      display: block;
    }

wy-modal .wy-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(26, 26, 26, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

wy-modal .wy-modal-box {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

wy-modal .wy-modal-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--paper-edge);
  flex-shrink: 0;
}

wy-modal .wy-modal-heading {
  font-family: var(--ff-serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--ink);
}

wy-modal .wy-modal-body {
  padding: 24px 32px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-family: var(--ff-sans);
  font-size: var(--fs-body-s);
  color: var(--ink-mute);
  line-height: var(--lh-normal);
}

wy-modal .wy-modal-footer {
  padding: 16px 32px 28px;
  border-top: 1px solid var(--paper-edge);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  wy-modal .wy-modal-scrim {
    padding: 0;
    align-items: flex-end;
  }

  wy-modal .wy-modal-box {
    max-height: 92vh;
  }

  wy-modal .wy-modal-header {
    padding: 24px 24px 20px;
  }

  wy-modal .wy-modal-body {
    padding: 20px 24px;
  }

  wy-modal .wy-modal-footer {
    padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  }
}