/* INOOWA Draw · Design System v1 pilot
 * 07B Dashboard · 13B Playground · 14B Library
 *
 * Non-destructive token adapter: preserves approved artwork, child data,
 * navigation routes and all original screen-specific JavaScript.
 * This CSS is loaded AFTER existing component styles; no global overrides.
 * Source of truth: design-system/tokens/tokens.json.
 */

/* Shared 144px child rail. Only these three pilot routes migrate;
   legacy routes keep their 138px geometry until their own QA. */
#dashboard-v2 .inoowa-child-rail,
#playground-v2 .inoowa-child-rail,
#library-v2 .inoowa-child-rail{
 width:var(--inoowa-size-nav-width);
 min-width:var(--inoowa-size-nav-width);
 border-right-color:var(--inoowa-color-semantic-border-default);
 background:linear-gradient(165deg,
    var(--inoowa-color-semantic-surface) 0%,
    var(--inoowa-color-semantic-surface-raised) 72%,
    var(--inoowa-color-primitive-navy700) 100%);
 color:var(--inoowa-color-semantic-text-primary);
}
/* 07B absolute layout, 13B and 14B flex layouts. */
#dashboard-v2 .d7-main{left:var(--inoowa-size-nav-width)}
#playground-v2 .inoowa-child-rail,
#library-v2 .inoowa-child-rail{
 flex:0 0 var(--inoowa-size-nav-width);
 position:relative;
 height:100%;
}
/* All six nav images and labels use one source/one selected state. */
#dashboard-v2 .inoowa-child-rail .inoowa-rail-btn,
#playground-v2 .inoowa-child-rail .inoowa-rail-btn,
#library-v2 .inoowa-child-rail .inoowa-rail-btn{
 width:120px;
 min-height:var(--inoowa-size-nav-item-height);
 border-radius:var(--inoowa-radius-md);
 font-family:var(--inoowa-font-family);
 color:var(--inoowa-color-semantic-text-primary);
 border-color:var(--inoowa-color-semantic-border-default);
}
#dashboard-v2 .inoowa-child-rail .inoowa-rail-parent,
#playground-v2 .inoowa-child-rail .inoowa-rail-parent,
#library-v2 .inoowa-child-rail .inoowa-rail-parent{
 width:120px;
 min-height:var(--inoowa-size-nav-item-height);
 border-radius:var(--inoowa-radius-md);
 font-family:var(--inoowa-font-family);
}
/* Active state belongs to the MENU BUTTON, not to a recolored bitmap. */
#dashboard-v2 .inoowa-child-rail .inoowa-rail-btn.is-active,
#playground-v2 .inoowa-child-rail .inoowa-rail-btn.is-active,
#library-v2 .inoowa-child-rail .inoowa-rail-btn.is-active{
 border-color:var(--inoowa-color-semantic-action-primary);
 background:linear-gradient(140deg,
   var(--inoowa-color-semantic-surface-interactive),
   var(--inoowa-color-primitive-navy600));
 box-shadow:inset 0 1px #ffffff3d,0 5px 0 #091839,0 8px 18px #010a3255;
}
#dashboard-v2 .inoowa-child-rail button:focus-visible,
#playground-v2 .inoowa-child-rail button:focus-visible,
#library-v2 .inoowa-child-rail button:focus-visible{
 outline:3px solid var(--inoowa-color-semantic-focus);
 outline-offset:2px;
}

/* Foundation inheritance: do not flatten approved illustration backgrounds. */
#dashboard-v2,#playground-v2,#library-v2{
 color:var(--inoowa-color-semantic-text-primary);
 font-family:var(--inoowa-font-family);
}
#dashboard-v2 :is(button,input):focus-visible,
#playground-v2 :is(button,input):focus-visible,
#library-v2 :is(button,input):focus-visible{
 outline:3px solid var(--inoowa-color-semantic-focus);
 outline-offset:3px;
}

/* Consistent 32px layout gutter on child content, 24px panel spacing. */
#dashboard-v2 .d7-scroll{
 padding:var(--inoowa-space-3) var(--inoowa-size-page-gutter) var(--inoowa-space-4);
}
#playground-v2 .pg13-scroll{
 padding:0 var(--inoowa-size-page-gutter) var(--inoowa-space-3);
}
#library-v2 .lib-main{
 padding:var(--inoowa-space-3) var(--inoowa-size-page-gutter);
}
#dashboard-v2 .d7-top-grid,
#dashboard-v2 .d7-creative-grid,
#dashboard-v2 .d7-bottom-grid{
 gap:var(--inoowa-space-3);
}
#dashboard-v2 .d7-world-grid,
#playground-v2 .pg13-categories,
#library-v2 .lib-grid{
 gap:var(--inoowa-space-2);
}

/* Typographic hierarchy: HERO 40, PAGE 32, SECTION 24, BODY 16. */
#dashboard-v2 .d7-welcome h1{
 font-size:var(--inoowa-font-size-page);line-height:var(--inoowa-font-leading-page);
 font-weight:var(--inoowa-font-weight-bold);
}
#playground-v2 .pg13-intro h1,
#library-v2 .lib-titlecopy h1{
 font-size:var(--inoowa-font-size-hero);
 line-height:var(--inoowa-font-leading-hero);
 font-weight:var(--inoowa-font-weight-heavy);
}
#dashboard-v2 .d7-section-heading h2,
#playground-v2 .pg13-section-intro h2{
 font-size:var(--inoowa-font-size-section);line-height:var(--inoowa-font-leading-section);
}
#dashboard-v2 .d7-section-heading p,
#playground-v2 .pg13-intro p,
#library-v2 .lib-empty p{
 color:var(--inoowa-color-semantic-text-secondary);
}
#playground-v2 .pg13-intro{padding-left:var(--inoowa-space-1)}

/* Shared button contracts mapped to existing component names.
   PRIMARY: 02C cyan → blue → lavender gradient with dark text, 56px touch area.
   SECONDARY: raised navy+light. 06B Signature stays a separate variant. */
#dashboard-v2 .d7-hero-action,
#playground-v2 .pg13-primary,
#library-v2 .lib-start{
 display:inline-flex;justify-content:center;align-items:center;
 min-height:var(--inoowa-size-button-height);
 height:auto;
 padding:0 var(--inoowa-space-3);
 gap:var(--inoowa-space-1);
 border:1px solid #A8E7F38F;
 border-radius:var(--inoowa-radius-button-primary);
 background:var(--inoowa-gradient-primary);
 color:var(--inoowa-color-semantic-text-on-primary);
 box-shadow:0 15px 37px #070f3a7a,0 0 23px #62c7ff45;
 font-size:var(--inoowa-font-size-body);
 line-height:var(--inoowa-font-leading-body);
 font-weight:var(--inoowa-font-weight-bold);
 transition:transform var(--inoowa-motion-duration-fast) var(--inoowa-motion-easing-standard),
            background var(--inoowa-motion-duration-base) var(--inoowa-motion-easing-standard);
}
#dashboard-v2 .d7-hero-action svg,
#playground-v2 .pg13-primary svg,
#library-v2 .lib-start svg{stroke:currentColor}
#dashboard-v2 .d7-hero-action:hover:not(:disabled),
#playground-v2 .pg13-primary:hover:not(:disabled),
#library-v2 .lib-start:hover:not(:disabled){
 filter:brightness(1.09);
 transform:translateY(-2px);
}
#dashboard-v2 .d7-hero-action:active:not(:disabled),
#playground-v2 .pg13-primary:active:not(:disabled),
#library-v2 .lib-start:active:not(:disabled){transform:translateY(2px);box-shadow:0 5px 15px #070f3a7a}
#dashboard-v2 .d7-hero-action:disabled,
#playground-v2 .pg13-primary:disabled,
#library-v2 .lib-start:disabled{
 opacity:var(--inoowa-opacity-disabled);
 cursor:not-allowed;box-shadow:none;transform:none;
}
#playground-v2 .pg13-secondary,
#dashboard-v2 .d7-feature-copy button,
#dashboard-v2 .d7-view-all{
 min-height:var(--inoowa-size-button-height);
 border:1px solid var(--inoowa-color-semantic-border-default);
 border-radius:var(--inoowa-radius-md);
 background:var(--inoowa-color-semantic-action-secondary);
 color:var(--inoowa-color-semantic-text-primary);
 box-shadow:inset 0 1px #ffffff26,0 4px 0 #0a1741;
 font-size:var(--inoowa-font-size-label);
 font-weight:var(--inoowa-font-weight-bold);
 padding:0 var(--inoowa-space-2);
 transition:background var(--inoowa-motion-duration-base) var(--inoowa-motion-easing-standard),
            transform var(--inoowa-motion-duration-fast) var(--inoowa-motion-easing-standard);
}
#playground-v2 .pg13-secondary:hover:not(:disabled),
#dashboard-v2 .d7-feature-copy button:hover:not(:disabled),
#dashboard-v2 .d7-view-all:hover:not(:disabled){
 background:var(--inoowa-color-primitive-navy600);
 transform:translateY(-1px);
}
#playground-v2 .pg13-secondary:active,
#dashboard-v2 .d7-feature-copy button:active,
#dashboard-v2 .d7-view-all:active{
 transform:translateY(2px);
 box-shadow:0 1px 0 #0a1741;
}
#dashboard-v2 .d7-view-all{display:inline-flex;align-items:center;gap:var(--inoowa-space-1)}
/* Compact secondary actions still meet the 48px web touch minimum;
   don't crowd 07B's photographic 161px feature cards. */
#dashboard-v2 .d7-feature-copy button,
#dashboard-v2 .d7-view-all{
 min-height:var(--inoowa-size-touch-min-web);
}

/* Consistent surfaces/radius without overwriting approved world illustrations. */
#dashboard-v2 :is(.d7-hero,.d7-progress-panel,.d7-world,.d7-feature-card,.d7-collection,.d7-achievements),
#playground-v2 :is(.pg13-hero,.pg13-category,.pg13-steps),
#library-v2 :is(.lib-card,.lib-empty){
 border-radius:var(--inoowa-radius-lg);
}
#dashboard-v2 :is(.d7-progress-panel,.d7-collection,.d7-achievements),
#playground-v2 :is(.pg13-hero,.pg13-category,.pg13-steps),
#library-v2 .lib-empty{
 border-color:var(--inoowa-color-semantic-border-default);
}

/* Search fields match: container handles focus-visible-within for input. */
#dashboard-v2 .d7-search-box,
#playground-v2 .pg13-search-wrap,
#library-v2 .lib-search{
 min-height:var(--inoowa-size-field-height);
 border:1px solid var(--inoowa-color-semantic-border-default);
 border-radius:var(--inoowa-radius-md);
 background:rgba(20,38,87,.87);
 color:var(--inoowa-color-semantic-text-secondary);
}
#dashboard-v2 .d7-search-box:focus-within,
#playground-v2 .pg13-search-wrap:focus-within,
#library-v2 .lib-search:focus-within{
 border-color:var(--inoowa-color-semantic-focus);
 box-shadow:0 0 0 2px #a9f0f73b;
}
#dashboard-v2 .d7-search-box input,
#playground-v2 .pg13-search-wrap input,
#library-v2 .lib-search input{
 font-size:var(--inoowa-font-size-body);
 color:var(--inoowa-color-semantic-text-primary);
}

/* Library filter chips are selected using a border + background + aria state.
   Unlike the primary CTA, selected chips do not use the action fill. */
#library-v2 .lib-tab,
#library-v2 .lib-icon-button{
 min-height:var(--inoowa-size-touch-min-web);
 height:auto;
 padding:0 var(--inoowa-space-2);
 border:1px solid var(--inoowa-color-semantic-border-default);
 border-radius:var(--inoowa-radius-pill);
 background:var(--inoowa-color-semantic-action-secondary);
 color:var(--inoowa-color-semantic-text-primary);
 font-size:var(--inoowa-font-size-label);
}
#library-v2 .lib-tab.is-active,
#library-v2 .lib-icon-button.is-active{
 border-color:var(--inoowa-color-semantic-action-primary);
 background:var(--inoowa-color-semantic-surface-interactive);
 color:var(--inoowa-color-semantic-text-primary);
 box-shadow:inset 0 1px #ffffff35,0 0 0 1px #71e5f133;
}
#library-v2 .lib-tab:hover:not(:disabled),
#library-v2 .lib-icon-button:hover:not(:disabled){
 background:var(--inoowa-color-primitive-navy600);
}
#library-v2 .lib-icon-button{
 width:var(--inoowa-size-button-height);
 min-width:var(--inoowa-size-button-height);
 min-height:var(--inoowa-size-button-height);
 padding:0;
 border-radius:var(--inoowa-radius-md);
}

/* 13B creative prompts remain intentionally illustrative, not prescribed art. */
#playground-v2 .pg13-category:focus-visible,
#dashboard-v2 .d7-world:focus-visible,
#library-v2 .lib-card button:focus-visible{
 outline:3px solid var(--inoowa-color-semantic-focus);
 outline-offset:3px;
}
/* Exit for motion sensitive users. */
@media(prefers-reduced-motion:reduce){
 #dashboard-v2 :is(button,.d7-world),
 #playground-v2 :is(button,.pg13-category),
 #library-v2 :is(button,.lib-card){
  transition:none!important;
 }
}