/* ==========================================================================
   PromptWiz
   ==========================================================================

   Visual principles
   -----------------
   • Flat cartoon-like surfaces
   • Contextual UI floats above the notebook
   • Shadows communicate elevation, not decoration
   • Strong dark borders are avoided where possible
   • Action menus feel like small pieces of paper lifted from the page
   • Selected actions use color, not additional depth
   • Group / infoiption panels remain lightweight metadata
   ========================================================================== */

   :root {
       --pw-font:
           "Nunito",
           "Avenir Next",
           "Trebuchet MS",
           system-ui,
           sans-serif;
   
       --pw-round-font:
           "Nunito",
           "Avenir Next",
           "Trebuchet MS",
           system-ui,
           sans-serif;
   
       --pw-script-font:
           "Segoe Print",
           "Bradley Hand",
           "Comic Sans MS",
           cursive;
   
       --pw-line: 1.2;
   
       --pw-blue:   oklch(93% 0.08 245);
       --pw-violet: oklch(93% 0.07 305);
       --pw-peach:  oklch(94% 0.07 60);
       --pw-coral:  oklch(82% 0.15 20);
   
       --pw-text:   oklch(20% 0.025 260);
       --pw-muted:  oklch(45% 0.03 260);
   
       --pw-panel:  var(--pw-blue);
       --pw-group:  var(--pw-violet);
       --pw-info:  var(--pw-peach);
   
       /*
        * No visible structural border.
        *
        * The menu is separated from the paper by its shadow,
        * like a little cartoon card sitting above the page.
        */
       --pw-border: transparent;
   
       /*
        * Cartoon elevation:
        *
        * 1. small dark contact shadow
        * 2. exaggerated offset soft shadow
        *
        * The second layer deliberately isn't perfectly centered.
        * It makes the panel feel physically lifted rather than blurred.
        */
       --pw-shadow-contact:
           2px 2px 0 rgb(35 30 20 / .18);
   
       --pw-shadow-ambient:
           5px 8px 0 rgb(35 30 20 / .08);
   
       --pw-shadow:
           var(--pw-shadow-contact),
           var(--pw-shadow-ambient);
   
       /*
        * Action menu gets a little more elevation because it is
        * the main contextual object.
        */
       --pw-action-shadow-contact:
           2px 2px 0 rgb(35 30 20 / .20);
   
       --pw-action-shadow-ambient:
           7px 10px 0 rgb(35 30 20 / .10);
   
       --pw-action-shadow:
           var(--pw-action-shadow-contact),
           var(--pw-action-shadow-ambient);
   
       --pw-z-panel: 1000;
       --pw-z-group: 1100;
       --pw-z-info: 1100;
   }
   
   
   .pw-trigger {
    outline: none !important;
    box-shadow: none;
    transition: outline-color .1s ease;
  }
  
  .pw-trigger:focus {
    transform: none;
    box-shadow: none;
    outline: 1.5px solid oklch(82% 0.012 65);
    outline-offset: 2px;
  }

  details.pw-trigger > summary,
  .pw-trigger:not(details) {
    animation: nb-blink-text 1s step-end infinite;
  }

@keyframes nb-blink-text {
  50% {
    color: transparent;
  }
}
   
   
   .pw-prompt {
       display: block;
       box-sizing: border-box;
       width: 100%;
       margin: 0 0 .25rem;
       padding: .3rem .45rem;
   
       background: white;
       color: var(--pw-text);
   
       /*
        * Keep the prompt almost borderless too.
        * The tiny inset line is enough to define the writing surface.
        */
       border: 1px solid rgb(35 30 20 / .10);
       border-radius: 6px;
   
       outline: none;
   
       font:
           700 var(--pw-font) / var(--pw-line)
           var(--pw-round-font);
   
       letter-spacing: -.015em;
   
       box-shadow:
           1px 2px 0 rgb(35 30 20 / .07);
   }
   
   
   .pw-prompt::placeholder {
       color: var(--pw-muted);
       opacity: .7;
   }
   
   
   .tipwiz {
       opacity: 0;
       pointer-events: none;
   
       transition:
           opacity .1s ease,
           transform .1s ease;
   }
   
   
   .tipwiz.is-displayed {
       opacity: 1;
       pointer-events: auto;
       transform: translateY(0);
   }
   
   
   .pw-action-panel,
   .pw-group-panel,
   .pw-info-panel {
       color: var(--pw-text);
       font-family: var(--pw-round-font);
       line-height: var(--pw-line);
   
       /*
        * No dark outline.
        *
        * The shadow itself is the boundary.
        */
       border: 0;
   
       box-shadow: var(--pw-shadow);
   }
   
   
   /*
    * Main contextual action menu
    *
    * This is intentionally more "card floating above paper"
    * than "browser popup".
    */
   .pw-action-panel {
       z-index: var(--pw-z-panel);
   
       max-width:
           min(26rem, calc(100vw - .75rem));
   
       padding: .25rem;
   
       background: var(--pw-panel);
   
       border-radius: 8px;
   
       transform: translateY(-1px);
   
       box-shadow: var(--pw-action-shadow);
   
       transition:
           transform .1s ease,
           box-shadow .1s ease;
   }
   
   
   /*
    * Slight extra lift while interacting.
    *
    * The shadow becomes bigger instead of adding a border,
    * preserving the flat cartoon surface.
    */
   .pw-action-panel:hover {
       transform: translateY(-2px);
   
       box-shadow:
           2px 3px 0 rgb(35 30 20 / .20),
           8px 12px 0 rgb(35 30 20 / .11);
   }
   
   
   .pw-action-list {
       display: flex;
       flex-direction: column;
   
       margin: 0;
       padding: 0;
   
       list-style: none;
   }
   
   
   .pw-action-item {
       padding: .2rem .45rem;
   
       color: var(--pw-text);
   
       border-radius: 5px;
   
       cursor: pointer;
   
       font:
           750 var(--pw-font) / var(--pw-line)
           var(--pw-round-font);
   
       letter-spacing: -.015em;
   
       transition:
           background-color .07s ease,
           transform .07s ease;
   }
   
   
   .pw-action-item:hover {
       background: rgb(255 255 255 / .35);
   }
   
   
   .pw-action-item.pw-selected {
       background: var(--pw-coral);
       color: white;
   
       transform: translateX(1px);
   }
   
   
   /*
    * Group label:
    * still elevated, but noticeably lighter than the main menu.
    */
   .pw-group-panel {
       z-index: var(--pw-z-group);
   
       padding: .15rem .45rem;
   
       background: var(--pw-group);
   
       border-radius: 999px;
   
       font:
           850 .68rem / 1.1
           var(--pw-round-font);

       letter-spacing: .025em;
       text-transform: lowercase;
   
       box-shadow:
           1px 2px 0 rgb(35 30 20 / .14),
           3px 5px 0 rgb(35 30 20 / .06);
   }
   
   
   /*
    * Description is a little paper note floating beside
    * the action menu.
    */
   .pw-info-panel {
       z-index: var(--pw-z-info);
   
       max-width: 22rem;
   
       padding: .2rem .4rem;
   
       background: var(--pw-info);
   
       border-radius: 6px;
   
       font:
           550 var(--pw-font) / var(--pw-line)
           var(--pw-round-font);
   
       box-shadow:
           1px 2px 0 rgb(35 30 20 / .13),
           4px 6px 0 rgb(35 30 20 / .06);
   }
   
    /*
    * Action description
    *
    * A quiet note that inherits the warm info-panel palette.
    */
    .pw-descr-item {
        padding: .1rem .1rem .25rem;

        color: var(--pw-text);

        font-size: .9em;
        font-weight: 600;
    }


    /*
    * Action preview
    *
    * A brighter paper inset, gently lifted from the warm panel.
    * The subtle highlight makes the preview feel illuminated
    * without introducing a new accent color.
    */
    .pw-preview-item {
        margin-top: .25rem;
        padding: .4rem .5rem;

        background:
            linear-gradient(
                145deg,
                rgb(255 255 255 / .96),
                rgb(255 255 255 / .78)
            );

        color: var(--pw-text);

        border-radius: 5px;

        box-shadow:
            inset 0 1px 0 rgb(255 255 255 / .95),
            1px 2px 0 rgb(35 30 20 / .08);

        font-size: .9em;
        font-weight: 550;
    }   
   
   .pw-action-panel .tip,
   .pw-group-panel .tip,
   .pw-info-panel .tip {
       margin: 0;
   }
   
   
   .pw-info-panel .tip em,
   .pw-info-panel .tip i {
       font-family: var(--pw-script-font);
       font-weight: 600;
   }
   
   
   @media (prefers-reduced-motion: reduce) {
       .tipwiz,
       .pw-trigger,
       .pw-prompt,
       .pw-action-panel,
       .pw-action-item {
           transition: none;
       }
   
       .pw-action-panel {
           transform: none;
       }
   }