/* =============================================================================
   HYN Learning Companion Framework
   Design Token System
   =============================================================================

   Framework        : HYN Learning Companion
   File             : style.css
   Section          : Root Design Tokens
   Version          : 2.2.0
   Status           : Production
   Layout           : 300 × 600 px
   Token Standard   : CSS Custom Properties
   Naming           : --hyn-*
   Architecture     : Token → Semantic → Component → Module

   Purpose
   -----------------------------------------------------------------------------
   Centralized Design Token System for the entire HYN UI.
   All colors, typography, spacing, sizing, layout, motion,
   elevation, accessibility, and component tokens are defined here.

   Rules
   -----------------------------------------------------------------------------
   • Edit tokens only inside this :root block.
   • Do not hardcode design values inside components.
   • Semantic tokens should reference foundation tokens whenever possible.
   • Component tokens should reference semantic tokens whenever possible.
   • Keep all tokens grouped by category.
   • Maintain production token order.

============================================================================= */

:root {

    /* Page Theme Tokens */
    --hyn-page-background: #ffffff;
    --hyn-page-surface: #ffffff;
    --hyn-page-text: #1f2937;
    --hyn-page-heading: #0f172a;
    --hyn-page-link: #1d4ed8;
    --hyn-page-border: #e5e7eb;

    /* =========================================================================
       Brand Colors
    ========================================================================= */

    --hyn-color-primary:
        #2563eb;

    --hyn-color-primary-light:
        #3b82f6;

    --hyn-color-primary-dark:
        #1d4ed8;

    --hyn-color-brand-dark:
        #1e3a8a;

    --hyn-color-secondary:
        #0f172a;

    --hyn-color-accent:
        var(--hyn-color-primary);

    --hyn-color-accent-soft:
        #dbeafe;



    /* =========================================================================
       Surface Colors
    ========================================================================= */

    --hyn-color-surface-primary:
        #ffffff;

    --hyn-color-surface-secondary:
        #f8fafc;

    --hyn-color-surface-tertiary:
        #f1f5f9;

    --hyn-color-surface-overlay:
        rgba(255,255,255,.85);

    --hyn-color-surface-backdrop:
        rgba(15,23,42,.45);



    /* =========================================================================
       Text Colors
    ========================================================================= */

    --hyn-color-text-primary:
        #0f172a;

    --hyn-color-text-secondary:
        #334155;

    --hyn-color-text-muted:
        #64748b;

    --hyn-color-text-disabled:
        #94a3b8;

    --hyn-color-text-inverse:
        #ffffff;



    /* =========================================================================
       Border Colors
    ========================================================================= */

    --hyn-color-border-primary:
        #056ded;

    --hyn-color-border-secondary:
        #e2e8f0;

    --hyn-color-border-muted:
        #f1f5f9;

    --hyn-color-border-accent:
        var(--hyn-color-accent);



    /* =========================================================================
       Interactive Colors
    ========================================================================= */

    --hyn-color-hover:
        #eff6ff;

    --hyn-color-active:
        #dbeafe;

    --hyn-color-focus:
        var(--hyn-color-primary);

    --hyn-color-selected:
        #bfdbfe;

    --hyn-color-disabled:
        #e2e8f0;



    /* =========================================================================
       Status Colors
    ========================================================================= */

    --hyn-color-success:
        #16a34a;

    --hyn-color-success-soft:
        #dcfce7;

    --hyn-color-warning:
        #d97706;

    --hyn-color-warning-soft:
        #fef3c7;

    --hyn-color-error:
        #dc2626;

    --hyn-color-error-soft:
        #fee2e2;

    --hyn-color-information:
        var(--hyn-color-primary);

    --hyn-color-information-soft:
        #dbeafe;



    /* =========================================================================
       Semantic Surface Tokens
    ========================================================================= */

    --hyn-color-panel-background:
        var(--hyn-color-surface-primary);

    --hyn-color-panel-border:
        var(--hyn-color-border-primary);

    --hyn-color-card-background:
        var(--hyn-color-surface-primary);

    --hyn-color-card-border:
        var(--hyn-color-border-secondary);

    --hyn-color-hover-surface:
        var(--hyn-color-hover);

    --hyn-color-selected-surface:
        var(--hyn-color-selected);

    --hyn-color-overlay:
        var(--hyn-color-surface-overlay);

    --hyn-color-backdrop:
        var(--hyn-color-surface-backdrop);

    --hyn-color-brand-background:
        var(--hyn-color-brand-dark);

    --hyn-color-brand-border:
        var(--hyn-color-border-secondary);

    --hyn-color-status-background:
        var(--hyn-color-primary-dark);



    /* =========================================================================
       Semantic Feedback Tokens
    ========================================================================= */

    --hyn-color-success-surface:
        var(--hyn-color-success-soft);

    --hyn-color-warning-surface:
        var(--hyn-color-warning-soft);

    --hyn-color-error-surface:
        var(--hyn-color-error-soft);

    --hyn-color-information-surface:
        var(--hyn-color-information-soft);

    --hyn-color-highlight-surface:
        var(--hyn-color-accent-soft);



    /* =========================================================================
       Layout Tokens
    ========================================================================= */

    --hyn-panel-width:
        300px;

    --hyn-panel-width-expanded:
        var(--hyn-panel-width);

    --hyn-panel-width-desktop:
        var(--hyn-panel-width);

    --hyn-panel-width-laptop:
        var(--hyn-panel-width);

    --hyn-panel-width-tablet:
        var(--hyn-panel-width);

        /* =========================================================================
       Reference Canvas
    ========================================================================= */

    --hyn-reference-width:
        300px;

    --hyn-reference-height:
        600px;



    /* =========================================================================
       Root Padding
    ========================================================================= */

    --hyn-root-padding-top:
        4px;

    --hyn-root-padding-right:
        4px;

    --hyn-root-padding-bottom:
        4px;

    --hyn-root-padding-left:
        4px;



    /* =========================================================================
       Content Area
    ========================================================================= */

    --hyn-content-width:
        292px;

    --hyn-content-height:
        592px;


    --hyn-panel-border-width:
        1px;



    /* =========================================================================
       Navigation Area Tokens

       Navigation Area
       ----------------
       Total Height      : 383px
       Top Space         :   2px
       Scroll Region     : 379px
       Bottom Space      :   2px

       The Scroll Region is the framework's only scrollable area.
    ========================================================================= */

    --hyn-navigation-area-height:
        383px;

    --hyn-navigation-top-space:
        2px;

    --hyn-navigation-scroll-height:
        379px;

    --hyn-navigation-bottom-space:
        2px;

    --hyn-navigation-area-padding-top:
        var(--hyn-navigation-top-space);

    --hyn-navigation-area-padding-bottom:
        var(--hyn-navigation-bottom-space);

    --hyn-scrollable-navigation-height:
        var(--hyn-navigation-scroll-height);



    /* =========================================================================
       Brand Module Tokens
    ========================================================================= */

    --hyn-brand-module-height:
        38px;

    --hyn-brand-module-padding-top:
        0;

    --hyn-brand-module-padding-right:
        0;

    --hyn-brand-module-padding-bottom:
        var(--hyn-space-05);

    --hyn-brand-module-padding-left:
        0;

    --hyn-brand-logo-width:
        36px;

    --hyn-brand-logo-height:
        34px;

    --hyn-status-icon-width:
        36px;

    --hyn-status-icon-height:
        34px;



    /* =========================================================================
       Reading Overview Module Tokens
    ========================================================================= */

    --hyn-reading-overview-module-height:
        87px;



    /* =========================================================================
       Reading Overview
       Module Inner Spacing
    ========================================================================= */

    --hyn-reading-overview-module-padding-top:
        var(--hyn-space-05);

    --hyn-reading-overview-module-padding-right:
        0;

    --hyn-reading-overview-module-padding-bottom:
        var(--hyn-space-05);

    --hyn-reading-overview-module-padding-left:
        0;



    /* =========================================================================
       Reading Overview
       Layout
    ========================================================================= */

    --hyn-overview-header-height:
        25px;

    --hyn-overview-header-padding-y:
        0;

    --hyn-overview-header-padding-x:
        var(--hyn-space-3);

    --hyn-overview-grid-gap:
        var(--hyn-space-1);

    --hyn-overview-card-height:
        25px;

    --hyn-overview-grid-height:
        calc(
            (var(--hyn-overview-card-height) * 2) +
            var(--hyn-overview-grid-gap)
        );



    /* =========================================================================
       Reading Overview
       Card Content
    ========================================================================= */

    --hyn-progress-bar-width:
        55px;

    --hyn-progress-bar-height:
        var(--hyn-space-2);

    --hyn-progress-bar-offset:
        0;

    --hyn-overview-value-gap:
        0px;

    --hyn-overview-percent-width:
        32px;

    --hyn-overview-percent-offset:
        2px;



    /* =========================================================================
       Quick Actions Module Tokens
    ========================================================================= */

    --hyn-quick-actions-module-height:
        58px;



    /* =========================================================================
       Quick Actions
       Module Padding
    ========================================================================= */

    --hyn-quick-actions-module-padding-top:
        2px;

    --hyn-quick-actions-module-padding-right:
        0;

    --hyn-quick-actions-module-padding-bottom:
        2px;

    --hyn-quick-actions-module-padding-left:
        0;



    /* =========================================================================
       Quick Actions
       Layout
    ========================================================================= */

    --hyn-quick-actions-row-height:
        25px;

    --hyn-quick-actions-row-gap:
        4px;

    --hyn-quick-actions-grid-columns:
        2;

    --hyn-quick-actions-grid-gap:
        var(--hyn-quick-actions-row-gap);

    --hyn-quick-actions-grid-height:
        54px;



    /* =========================================================================
       Action Button
    ========================================================================= */

    --hyn-quick-actions-card-height:
        25px;

    --hyn-action-button-height:
        var(--hyn-quick-actions-card-height);

    --hyn-action-button-horizontal-padding:
        var(--hyn-space-3);

    --hyn-action-button-gap:
        var(--hyn-space-2);



    /* =========================================================================
       Action Icon
    ========================================================================= */

    --hyn-action-icon-size:
        16px;



    /* =========================================================================
       Action Label
    ========================================================================= */

    --hyn-action-label-font-size:
        var(--hyn-font-ui-sm);

    --hyn-action-label-font-weight:
        var(--hyn-font-label-weight);



    /* =========================================================================
       Action State
    ========================================================================= */

    --hyn-action-state-width:
        40px;

    --hyn-action-state-font-size:
        8px;

    /* =========================================================================
       Search Module Tokens
    ========================================================================= */

    --hyn-search-module-height:
        32px;



    /* =========================================================================
       Search Module
       Internal Padding
    ========================================================================= */

    --hyn-search-module-padding-top:
        0;

    --hyn-search-module-padding-right:
        var(--hyn-space-3);

    --hyn-search-module-padding-bottom:
        var(--hyn-space-1);

    --hyn-search-module-padding-left:
        var(--hyn-space-3);



    /* =========================================================================
       Search Input
    ========================================================================= */

    --hyn-search-input-height:
        20px;

    --hyn-search-input-background:
        var(--hyn-color-surface-primary);

    --hyn-search-input-border:
        var(--hyn-color-border-secondary);

    --hyn-search-result-gap:
        var(--hyn-space-1);

    --hyn-search-clear-button-size:
        16px;



    /* =========================================================================
       Navigation Module Tokens
    =========================================================================

       Production Navigation Layout

       Navigation Region Height : 383px

       Top Internal Space       :   2px
       Search Module            :  32px
       Navigation Tree          : 347px
       Bottom Internal Space    :   2px

       Total                    : 383px

    ========================================================================= */

    --hyn-navigation-module-height:
        383px;

    --hyn-navigation-module-padding-top:
        2px;

    --hyn-navigation-module-padding-bottom:
        2px;

    --hyn-navigation-tree-height:
        347px;



    /* =========================================================================
       Navigation Tree
    ========================================================================= */

    --hyn-navigation-link-height:
        25px;

    --hyn-navigation-row-height:
        var(--hyn-navigation-link-height);

    --hyn-navigation-link-padding-x:
        var(--hyn-space-3);

    --hyn-navigation-chevron-size:
        20px;

    --hyn-navigation-indent:
        var(--hyn-space-5);

    --hyn-navigation-scrollbar-width:
        6px;



    /* =========================================================================
       Footer Module Tokens
    ========================================================================= */

    --hyn-footer-module-height:
        26px;

    --hyn-footer-padding-top:
        2px;

    --hyn-footer-padding-right:
        var(--hyn-space-3);

    --hyn-footer-padding-bottom:
        0;

    --hyn-footer-padding-left:
        var(--hyn-space-3);

    --hyn-footer-content-height:
        24px;

    --hyn-footer-feedback-height:
        20px;



    /* =========================================================================
       Region Heights
       Production Layout Lock v2.2.0

       Root Panel Height : 600px

       Fixed Area        : 183px
       Navigation Area   : 383px
       Footer Area       : 26px

       Total             : 600px

    ========================================================================= */

    --hyn-panel-height:
        600px;

    --hyn-fixed-area-height:
        183px;

    --hyn-navigation-area-height:
        383px;

    --hyn-footer-height:
        26px;



    /* =========================================================================
       Module Heights
       Production Layout Lock

       Fixed Area Distribution

       Brand Module             : 38px
       Reading Overview Module  : 87px
       Quick Actions Module     : 58px

       Navigation Distribution

       Search Module            : 32px
       Navigation Tree          : 347px

    ========================================================================= */

    --hyn-brand-module-height:
        38px;

    --hyn-reading-overview-module-height:
        87px;

    --hyn-quick-actions-module-height:
        58px;

    --hyn-search-module-height:
        32px;

    --hyn-navigation-tree-height:
        347px;



    /* =========================================================================
       Core Typography Tokens
    ========================================================================= */

    --hyn-font-title:
        var(--hyn-font-ui-lg);

    --hyn-font-subtitle:
        var(--hyn-font-ui-md);

    --hyn-font-label:
        var(--hyn-font-ui-sm);

    --hyn-font-value:
        var(--hyn-font-ui-md);

    --hyn-font-icon:
        var(--hyn-font-size-sm);

    --hyn-font-title-weight:
        var(--hyn-font-weight-bold);

    --hyn-font-subtitle-weight:
        var(--hyn-font-weight-regular);

    --hyn-font-label-weight:
        var(--hyn-font-weight-regular);

    --hyn-font-value-weight:
        var(--hyn-font-weight-bold);

    --hyn-font-icon-weight:
        var(--hyn-font-weight-bold);

        /* =========================================================================
       Typography Foundation
       =========================================================================

       Production Typography System

       Base
       ----
       1rem = 16px

       Generic Typography Scale
       ------------------------
       Shared reusable font sizes.

       Semantic Typography Scale
       -------------------------
       Production UI font sizes locked by
       the UI Specification and Pixel Distribution Report.

    ========================================================================= */

    --hyn-font-family-base:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;



    /* =========================================================================
       Generic Font Size Tokens
    ========================================================================= */

    --hyn-font-size-xs:
        0.75rem;          /* 12px */

    --hyn-font-size-sm:
        0.875rem;         /* 14px */

    --hyn-font-size-base:
        1rem;             /* 16px */

    --hyn-font-size-lg:
        1.125rem;         /* 18px */

    --hyn-font-size-xl:
        1.25rem;          /* 20px */



    /* =========================================================================
       Production UI Font Size Tokens
    ========================================================================= */
    
    --hyn-font-ui-xs:
        0.5625rem;        /* 9px */

    --hyn-font-ui-sm:
        0.6875rem;        /* 11px */

    --hyn-font-ui-md:
        0.75rem;          /* 12px */

    --hyn-font-ui-lg:
        0.875rem;         /* 14px */



    /* =========================================================================
       Font Weight Tokens
    ========================================================================= */

    --hyn-font-weight-regular:
        400;

    --hyn-font-weight-medium:
        500;

    --hyn-font-weight-semibold:
        600;

    --hyn-font-weight-bold:
        700;



    /* =========================================================================
       Line Height Tokens
    ========================================================================= */

    --hyn-line-height-tight:
        1.25;

    --hyn-line-height-normal:
        1.5;

    --hyn-line-height-relaxed:
        1.75;

    --hyn-line-height-single:
        1;



    /* =========================================================================
       Icon Tokens
    ========================================================================= */

    --hyn-icon-size-xs:
        16px;

    --hyn-icon-size-sm:
        20px;

    --hyn-icon-size-md:
        24px;

    --hyn-icon-size-lg:
        32px;



    /* =========================================================================
       Spacing Tokens

       Base
       ----
       1rem = 16px

       Pixel Equivalents

       0.125rem = 2px
       0.25rem  = 4px
       0.5rem   = 8px
       0.75rem  = 12px
       1rem     = 16px

    ========================================================================= */

    --hyn-space-0:
        0;

    --hyn-space-05:
        0.125rem;

    --hyn-space-1:
        0.25rem;

    --hyn-space-2:
        0.5rem;

    --hyn-space-3:
        0.75rem;

    --hyn-space-4:
        1rem;

    --hyn-space-5:
        1.25rem;

    --hyn-space-6:
        1.5rem;

    --hyn-space-8:
        2rem;

    --hyn-space-10:
        2.5rem;

    --hyn-space-12:
        3rem;



    /* =========================================================================
       Radius Tokens
    ========================================================================= */

    --hyn-radius-none:
        0;

    --hyn-radius-sm:
        0.375rem;

    --hyn-radius-md:
        0.5rem;

    --hyn-radius-lg:
        0.75rem;

    --hyn-radius-xl:
        1rem;

    --hyn-radius-pill:
        9999px;



    /* =========================================================================
       Shadow Tokens
    ========================================================================= */

    --hyn-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.05);

    --hyn-shadow-md:
        0 4px 12px rgba(15, 23, 42, 0.08);

    --hyn-shadow-lg:
        0 10px 24px rgba(15, 23, 42, 0.20);



    /* =========================================================================
       Focus Tokens
    ========================================================================= */

    --hyn-focus-ring-width:
        2px;

    --hyn-focus-ring-color:
        var(--hyn-color-focus);

    --hyn-focus-ring-offset:
        2px;



    /* =========================================================================
       Motion Tokens
    ========================================================================= */

    --hyn-transition-fast:
        150ms ease;

    --hyn-transition-normal:
        250ms ease;

    --hyn-transition-slow:
        350ms ease;



    /* =========================================================================
       Layer (Z-Index) Tokens
    ========================================================================= */

    --hyn-z-base:
        1;

    --hyn-z-dropdown:
        100;

    --hyn-z-sticky:
        200;

    --hyn-z-panel:
        1000;

    --hyn-z-toggle:
        1010;

    --hyn-z-modal:
        2000;

    --hyn-z-tooltip:
        3000;



    /* =========================================================================
       Accessibility Tokens
    ========================================================================= */

    --hyn-high-contrast-border-width:
        2px;

    --hyn-disabled-opacity:
        .5;

    --hyn-loading-opacity:
        .55;



    /* =========================================================================
       Animation Tokens
    ========================================================================= */

    --hyn-navigation-expand-max-height:
        1200px;

    --hyn-animation-status-duration:
        1.2s;

    --hyn-animation-easing:
        ease-in-out;

    --hyn-animation-slide-distance:
        12px;

}


/* =============================================================================
   PART 1.2
   Foundation
   Reset
   Base Styles
   Typography
   Accessibility
   Focus
   Interaction
   Utility
============================================================================= */



/* =============================================================================
   Reset

   Reset styles are scoped exclusively to the
   HYN Learning Companion Framework.

============================================================================= */

.hyn-learning-companion,
.hyn-learning-companion *,
.hyn-learning-companion *::before,
.hyn-learning-companion *::after {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}



/* =============================================================================
   Base Styles

   Defines the default presentation layer for the framework.

============================================================================= */

.hyn-learning-companion {

    font-family:
        var(--hyn-font-family-base);

    font-size:
        var(--hyn-font-size-base);

    font-weight:
        var(--hyn-font-weight-regular);

    line-height:
        var(--hyn-line-height-normal);

    color:
        var(--hyn-color-text-primary);

    background-color:
        transparent;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}



/* =============================================================================
   Typography

   Shared typography foundation.

============================================================================= */
 


/* =============================================================================
   Accessibility
============================================================================= */



/* =============================================================================
   Text Selection
============================================================================= */

.hyn-learning-companion ::selection {

    background:
        var(--hyn-color-selected-surface);

    color:
        var(--hyn-color-text-primary);

}



/* =============================================================================
   Disabled Elements
============================================================================= */

.hyn-learning-companion :disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}
/* =============================================================================
   Focus
============================================================================= */

.hyn-learning-companion :focus-visible {

    outline:
        var(--hyn-focus-ring-width)
        solid
        var(--hyn-focus-ring-color);

    outline-offset:
        var(--hyn-focus-ring-offset);

}



.hyn-learning-companion :focus:not(:focus-visible) {

    outline:
        none;

}



/* =============================================================================
   Interaction
============================================================================= */

.hyn-learning-companion button,
.hyn-learning-companion input,
.hyn-learning-companion textarea,
.hyn-learning-companion select,
.hyn-learning-companion a {

    font:
        inherit;

    color:
        inherit;

    transition:
        color var(--hyn-transition-fast),
        background-color var(--hyn-transition-fast),
        border-color var(--hyn-transition-fast),
        box-shadow var(--hyn-transition-fast);

}



.hyn-learning-companion button,
.hyn-learning-companion [role="button"],
.hyn-learning-companion summary {

    cursor:
        pointer;

}



/* =============================================================================
   Utility
============================================================================= */



/* =============================================================================
   Visually Hidden
============================================================================= */

.hyn-visually-hidden {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

}



/* =============================================================================
   Visually Hidden Focus Recovery
============================================================================= */

.hyn-visually-hidden:focus,
.hyn-visually-hidden:active {

    position:
        static !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    overflow:
        visible !important;

    clip:
        auto !important;

    clip-path:
        none !important;

    white-space:
        normal !important;

}

/* =============================================================================
   PART 2.1
   Framework Layout

   Establishes the root layout structure of the
   HYN Learning Companion Framework.
============================================================================= */



/* =============================================================================
   Framework Shell

   Responsibilities

   • Creates the framework positioning context.
   • Defines the root layout.
   • Isolates the framework from the website theme.
   • Hosts the Learning Companion Panel.
============================================================================= */



/* =============================================================================
   Framework Shell
   Viewport Safe Positioning
============================================================================= */

.hyn-learning-companion {

    position:
        fixed;

    top:
        var(--hyn-space-4);

    right:
        var(--hyn-space-6);

    transform:
        none;

    display:
        flex;

    flex-direction:
        column;

    width:
        var(--hyn-panel-width-expanded);

    height:
        var(--hyn-panel-height);

    max-height:
        var(--hyn-panel-height);

    z-index:
        var(--hyn-z-panel);

    isolation:
        isolate;

    pointer-events:
        auto;

}
/* =============================================================================
   Learning Companion Panel

   Responsibilities

   • Primary visual container.
   • Defines the official panel appearance.
   • Owns the internal layout.
   • Provides clipping and overflow management.

============================================================================= */

/* =============================================================================
   Panel
============================================================================= */

.hyn-panel {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        100%;

    padding:
        var(--hyn-root-padding-top)
        var(--hyn-root-padding-right)
        var(--hyn-root-padding-bottom)
        var(--hyn-root-padding-left);

    background-color:
        var(--hyn-color-panel-background);

    border:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-panel-border);

    border-radius:
        0;

    box-shadow:
        var(--hyn-shadow-lg);

    overflow:
        hidden;

}


/* =============================================================================
   Panel Runtime States

   Applied only by JavaScript.

============================================================================= */

.hyn-panel.hyn-is-expanded {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



.hyn-panel.hyn-is-collapsed {

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

}



/* =============================================================================
   Panel Content

   Responsibilities

   • Owns the primary vertical layout.
   • Hosts the three permanent panel regions.
   • Prevents region overflow.

============================================================================= */



/* =============================================================================
   Panel Content

   Production Layout Mode

============================================================================= */

.hyn-panel-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
         1 1 auto;

    min-height:
        0;

    overflow:
        hidden;

}

/* =============================================================================
   PART 2.2
   Panel Regions

   Defines the three permanent layout regions of the
   HYN Learning Companion Panel.

   Production Layout Lock (v2.1.0)

   Root Panel Height : 600px

   • Fixed Area       : 183px
   • Navigation Area  : 383px
   • Footer Area      : 26px

   Total Height       : 600px

   Region heights are controlled by the
   Production Layout Tokens defined in :root.

============================================================================= */



/* =============================================================================
   Panel Fixed Area

   Responsibilities

   • Hosts the fixed framework modules.
   • Maintains a stable layout.
   • Separates fixed content from the navigation region.

   Modules

   • Brand Module
   • Reading Overview Module
   • Quick Actions Module

============================================================================= */

.hyn-panel-fixed-area {

    display: flex;
    flex-direction: column;
    flex: 0 0 auto;

    height: var(--hyn-fixed-area-height);

    padding: 0;
    gap: 0;

    background-color: var(--hyn-color-panel-background);

    border-bottom: var(--hyn-panel-border-width)
                   solid
                    var(--hyn-color-panel-border);

    overflow: hidden;

}



/* =============================================================================
   Fixed Area Layout
============================================================================= */

.hyn-panel-fixed-area > * {

    flex:
        0 0 auto;

    width:
        100%;

}



/* =============================================================================
   Panel Navigation Area

   Responsibilities

   • Hosts the Search Module.
   • Hosts the Navigation Module.
   • Owns the primary scroll container.
   • Maintains the production navigation region.

============================================================================= */

.hyn-panel-navigation-area {

    display:
        flex;

    flex-direction:
        column;

    flex:
        0 0 auto;

    height:
        var(--hyn-navigation-area-height);

    padding:
        var(--hyn-space-05);

    gap:
        0;
    outline:
        none;

    background-color:
        var(--hyn-color-surface-primary);

    border:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-border-secondary);

    border-radius:
        var(--hyn-radius-lg);

    overflow:
        hidden;

}


/* =============================================================================
   Navigation Area Layout
============================================================================= */

.hyn-panel-navigation-area > * {

    flex:
        0 0 auto;

    width:
        100%;

}



/* =============================================================================
   Navigation Scroll Container
============================================================================= */

.hyn-navigation-module {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    scroll-behavior:
        smooth;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-gutter:
        stable;

}

/* =============================================================================
   Panel Footer

   Responsibilities

   • Hosts the Footer Module.
   • Maintains the bottom layout boundary.
   • Displays framework feedback and copyright.

============================================================================= */

.hyn-panel-footer {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    height:
        var(--hyn-footer-height);

    background-color:
        var(--hyn-color-panel-background);

    border-top:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-panel-border);

    border-radius:
        var(--hyn-radius-md);

    overflow-y:
        auto;

    overflow-x:
        hidden;

}


/* =============================================================================
   Footer Layout
============================================================================= */

.hyn-panel-footer > * {

    flex:
        0 0 auto;

    width:
        100%;

}

/* =============================================================================
   PART 3.1A
   Brand Module

   Responsibilities

   • Displays the official framework identity.
   • Displays the project logo.
   • Establishes the brand layout.

============================================================================= */



/* =============================================================================
   Brand Module
============================================================================= */

.hyn-brand-module {

    height:
        var(--hyn-brand-module-height);

    margin:
        0;

    padding:
        var(--hyn-brand-module-padding-top)
        var(--hyn-brand-module-padding-right)
        var(--hyn-brand-module-padding-bottom)
        var(--hyn-brand-module-padding-left);

    background-color:
        transparent;

}



/* =============================================================================
   Brand Container
============================================================================= */

.hyn-brand-container {

    display:
        flex;

    align-items:
        center;
    
    justify-content:
        space-between;

    width:
        100%;

    gap:
        var(--hyn-space-1);

}



/* =============================================================================
   Logo Container
============================================================================= */

/* =============================================================================
   Logo Container
============================================================================= */

.hyn-logo-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        40px;

    height:
        var(--hyn-brand-module-height);

    padding:
        var(--hyn-space-05);

    background-color:
        var(--hyn-color-primary-dark);

    border-radius:
        var(--hyn-radius-md);

    box-shadow:
        var(--hyn-shadow-md);

}

/* =============================================================================
   Logo Card
============================================================================= */

.hyn-logo-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-brand-logo-width);

    height:
        var(--hyn-brand-logo-height);

    background-color:
        var(--hyn-color-surface-primary);

    border-radius:
        var(--hyn-radius-md);

    overflow:
        hidden;

}

/* =============================================================================
   Brand Logo
============================================================================= */

.hyn-brand-logo {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    user-select:
        none;

    pointer-events:
        none;

}

.hyn-brand-logo-fallback {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .04em;

    color:
        var(--hyn-color-primary-dark);

}

.hyn-logo-card.hyn-logo-unavailable .hyn-brand-logo {

    display:
        none;

}

.hyn-logo-card.hyn-logo-unavailable .hyn-brand-logo-fallback {

    display:
        flex;

}

/* =============================================================================
   PART 3.1B
   Brand Content

   Responsibilities

   • Displays the framework title.
   • Displays the framework subtitle.
   • Centers the brand identity.

============================================================================= */



/* =============================================================================
   Brand Content
============================================================================= */

.hyn-brand-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        1 1 auto;

    min-width:
        0;

    padding:
        0;

    background-color:
        var(--hyn-color-primary);

    border-radius:
        var(--hyn-radius-md);

}



/* =============================================================================
   Brand Text
============================================================================= */

.hyn-brand-text {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-width:
        0;

}



/* =============================================================================
   Brand Title
============================================================================= */

.hyn-brand-title {

    margin:
        0 0 var(--hyn-space-1);

    width:
        100%;

    font-size:
        var(--hyn-font-title);

    font-weight:
        var(--hyn-font-title-weight);

    line-height:
        var(--hyn-line-height-tight);

    text-align:
        center;

    color:
        var(--hyn-color-text-inverse);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}



/* =============================================================================
   Brand Subtitle
============================================================================= */

.hyn-brand-subtitle {

    margin:
        0;

    width:
        100%;

    font-size:
        var(--hyn-font-subtitle);

    font-weight:
        var(--hyn-font-subtitle-weight);

    line-height:
        var(--hyn-line-height-normal);

    text-align:
        center;

    color:
        var(--hyn-color-text-inverse);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}

/* =============================================================================
   PART 3.1C
   Runtime Status

   Responsibilities

   • Displays the framework runtime status.
   • Displays the runtime icon.
   • Displays the runtime label.
   • Supports runtime state changes.

============================================================================= */



/* =============================================================================
   Status Container
============================================================================= */

.hyn-status-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 40px;

    width:
        40px;

    height:
        var(--hyn-brand-module-height);

    padding:
        var(--hyn-space-05);

    background:
        var(--hyn-color-primary-dark);

    border-radius:
        var(--hyn-radius-md);

}



/* =============================================================================
   Status Card
============================================================================= */

.hyn-status-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-status-icon-width);

    height:
        var(--hyn-status-icon-height);

    background:
        var(--hyn-color-primary-dark);

    border-radius:
        var(--hyn-radius-md);

    box-shadow:
        var(--hyn-shadow-md);

    transition:
        background-color
        var(--hyn-transition-fast);

}



/* =============================================================================
   Status Content
============================================================================= */

.hyn-status-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--hyn-space-05);

}



/* =============================================================================
   Status Icon
============================================================================= */

.hyn-status-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        var(--hyn-icon-size-xs);

    height:
        var(--hyn-icon-size-xs);

    font-size:
        var(--hyn-font-icon);

    font-weight:
        var(--hyn-font-icon-weight);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-inverse);

}



/* =============================================================================
   Status Label
============================================================================= */

.hyn-status-label {

    font-size:
        var(--hyn-font-label);

    font-weight:
        var(--hyn-font-label-weight);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-inverse);

    white-space:
        nowrap;

}



/* =============================================================================
   Status Runtime Classes

   Only one runtime status class may exist
   on the Status Card at any time.

============================================================================= */

.hyn-status-idle {

    background:
        var(--hyn-color-text-muted);

}



.hyn-status-initializing,
.hyn-status-running {

    background:
        var(--hyn-color-information);

}



.hyn-status-ready,
.hyn-status-completed {

    background:
        var(--hyn-color-success);

}



.hyn-status-paused {

    background:
        var(--hyn-color-warning);

}



.hyn-status-error,
.hyn-status-destroyed {

    background:
        var(--hyn-color-error);

}

/* =============================================================================
   PART 3.2
   Reading Overview Module

   Responsibilities

   • Presents document reading information.
   • Displays user progress.
   • Displays document metadata.
   • Renders supplied runtime data only.

============================================================================= */



/* =============================================================================
   Reading Overview Module
============================================================================= */

.hyn-reading-overview-module {

    display:
        flex;

    flex-direction:
        column;

    flex:
        0 0 auto;

    width:
        100%;

    height:
        var(--hyn-reading-overview-module-height);

    margin:
        0;

    padding:
        0;


    overflow:
        hidden;

}



/* =============================================================================
   Overview Container
============================================================================= */

.hyn-overview-container {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    height:
        100%;

    padding:
        var(--hyn-reading-overview-module-padding-top)
        var(--hyn-reading-overview-module-padding-right)
        var(--hyn-reading-overview-module-padding-bottom)
        var(--hyn-reading-overview-module-padding-left);

    gap:
        var(--hyn-space-1);

    background:
        rgba(0, 120, 255, .08);

}



/* =============================================================================
   Overview Header
============================================================================= */

.hyn-overview-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 var(--hyn-overview-header-height);

    width:
        100%;

    height:
        var(--hyn-overview-header-height);

    margin:
        0;

    padding:
        0
        var(--hyn-overview-header-padding-x);

    background:
        hsla(235, 79%, 30%, 0.773);

    border:
        3px solid hsl(120, 7%, 97%);

    border-radius:
        var(--hyn-radius-md);

}



/* =============================================================================
   Overview Title
============================================================================= */

.hyn-overview-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    font-size:
        var(--hyn-font-title);

    font-weight:
        var(--hyn-font-title-weight);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-inverse);

    white-space:
        nowrap;

}

/* =============================================================================
   Overview Grid
============================================================================= */


.hyn-overview-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, var(--hyn-overview-card-height));

    width:
        100%;

    height:
        var(--hyn-overview-grid-height);

    margin:
        0;

    padding:
        0;

    gap:
        var(--hyn-space-1);

}



/* =============================================================================
   Overview Card
============================================================================= */

.hyn-overview-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    height:
        var(--hyn-overview-card-height);

    padding:
        0
        var(--hyn-space-3);

    background:
        var(--hyn-color-card-background);

    border:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-card-border);

    border-radius:
        var(--hyn-radius-md);

    transition:
        background-color var(--hyn-transition-fast),
        border-color var(--hyn-transition-fast);

}

.hyn-overview-card:hover {

    background:
        var(--hyn-color-hover-surface);

}


/* =============================================================================
   Overview Label
============================================================================= */

.hyn-overview-label {

    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;

    margin:
        0;

    padding:
        0;

    font-size:
    var(--hyn-action-state-font-size);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-primary);

    white-space:
        nowrap;

}

/* =============================================================================
   Overview Spacer
============================================================================= */

.hyn-overview-spacer {

    flex:
        1 1 auto;

    min-width:
        0;

}

/* =============================================================================
   Overview Value
============================================================================= */

.hyn-overview-value {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex:
        1 1 0;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    gap:
        0;

    font-size:
    var(--hyn-action-state-font-size);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-primary);

    white-space:
        nowrap;

}

/* =============================================================================
   Progress Bar
============================================================================= */

.hyn-overview-progress {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex:
        0 0 var(--hyn-progress-bar-width);

    width:
        var(--hyn-progress-bar-width);

    height:
        var(--hyn-progress-bar-height);

    margin:
        0 0 0 var(--hyn-progress-bar-offset);

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--hyn-color-surface-tertiary);

    border:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-border-secondary);

    border-radius:
        var(--hyn-radius-pill);

}



/* =============================================================================
   Progress Fill
============================================================================= */

.hyn-overview-progress-fill {

    display:
        block;

    flex:
        0 0 auto;

    width:
        0;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        rgba(0, 0, 0, 0.95);

    border-radius:
        inherit;

    transition:
        width var(--hyn-transition-normal);

}


/* =============================================================================
   Overview Percent
============================================================================= */

.hyn-overview-percent {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex:
        0 0 auto;

    min-width:
        var(--hyn-overview-percent-width);

    margin:
        0 0 0 var(--hyn-overview-percent-offset);

    padding:
        0;

    font-size:
    var(--hyn-action-state-font-size);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    text-align:
        right;

    color:
        var(--hyn-color-text-primary);

    white-space:
        nowrap;

}

/* =============================================================================
   Current Reading Heading
============================================================================= */

.hyn-current-heading {

    position:
        relative;

    padding-left:
        10px;

    background:
        rgba(0, 170, 255, 0.06);

    box-shadow:
        inset 3px 0 0 rgba(0, 170, 255, 0.70);

    border-radius:
        3px;

    transition:
        background-color var(--hyn-transition-fast),
        box-shadow var(--hyn-transition-fast);

}

/* =============================================================================
   PART 3.3
   Quick Actions Module

   Responsibilities

   • Provides immediate access to common framework actions.
   • Organizes action buttons into a reusable grid.
   • Contains no visual heading.
   • Supports future action expansion.

============================================================================= */



/* =============================================================================
   Quick Actions Module
============================================================================= */

.hyn-quick-actions-module {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    height:
        var(--hyn-quick-actions-module-height);

    margin:
        0;

    padding:
        var(--hyn-quick-actions-module-padding-top)
        var(--hyn-quick-actions-module-padding-right)
        var(--hyn-quick-actions-module-padding-bottom)
        var(--hyn-quick-actions-module-padding-left);

    background:
        transparent;

}

/* =============================================================================
   Quick Actions Container
============================================================================= */

.hyn-quick-actions-container {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    width:
        100%;

    min-width:
        0;

}

/* =============================================================================
   Quick Actions Grid
============================================================================= */

.hyn-quick-actions-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, var(--hyn-quick-actions-row-height));

    width:
        100%;

    height:
        var(--hyn-quick-actions-grid-height);

    gap:
        var(--hyn-quick-actions-row-gap);

}

/* =============================================================================
   Action Button
============================================================================= */

.hyn-action-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--hyn-space-2);

    width:
        100%;

    height:
        var(--hyn-quick-actions-card-height);

    margin:
        0;

    padding:
        0
        var(--hyn-space-3);

    background:
        var(--hyn-color-card-background);

    border:
        var(--hyn-panel-border-width)
        solid
        var(--hyn-color-card-border);

    border-radius:
        var(--hyn-radius-md);

    cursor:
        pointer;

    transition:
        background-color var(--hyn-transition-fast),
        border-color var(--hyn-transition-fast),
        color var(--hyn-transition-fast),
        transform var(--hyn-transition-fast);

}



/* =============================================================================
   Action Icon
============================================================================= */

.hyn-action-icon {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        var(--hyn-action-icon-size);

    height:
        var(--hyn-action-icon-size);

    margin:
        0;

    padding:
        0;

    font-size:
        var(--hyn-action-icon-size);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-primary);

}



/* =============================================================================
   Action Label
============================================================================= */

.hyn-action-label {

    flex:
        1 1 auto;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    font-size:
    var(--hyn-action-state-font-size);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-primary);

    white-space:
        nowrap;

}



/* =============================================================================
   Action State
============================================================================= */

.hyn-action-state {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex:
        0 0 auto;

    min-width:
        var(--hyn-action-state-width);

    margin:
        0;

    padding:
        0;

    font-size:
    var(--hyn-action-state-font-size);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    text-align:
        right;

    color:
        var(--hyn-color-text-secondary);

    white-space:
        nowrap;

}



/* =============================================================================
   Action States
============================================================================= */

.hyn-action-button:not(:disabled):hover {

    background:
        var(--hyn-navigation-medical-green-soft);

    border-color:
        var(--hyn-navigation-medical-green);

}



.hyn-action-button:not(:disabled):active {

    transform:
        scale(.98);

}



.hyn-action-button:focus-visible {

    outline:
        var(--hyn-focus-ring-width)
        solid
        var(--hyn-focus-ring-color);

    outline-offset:
        var(--hyn-focus-ring-offset);

}



/* =============================================================================
   Action Disabled / Unavailable State
============================================================================= */

.hyn-action-button:disabled,
.hyn-action-button[data-state="unavailable"] {

    background:
        var(--hyn-color-surface-tertiary);

    border-color:
        var(--hyn-color-border-muted);

    color:
        var(--hyn-color-text-disabled);

    transform:
        none;

}

.hyn-action-button:disabled
.hyn-action-icon,
.hyn-action-button:disabled
.hyn-action-label,
.hyn-action-button:disabled
.hyn-action-state,
.hyn-action-button[data-state="unavailable"]
.hyn-action-icon,
.hyn-action-button[data-state="unavailable"]
.hyn-action-label,
.hyn-action-button[data-state="unavailable"]
.hyn-action-state {

    color:
        var(--hyn-color-text-disabled);

}



/* =============================================================================
   Action Active State
============================================================================= */

.hyn-action-button.is-active {

    background:
        var(--hyn-navigation-medical-green-active);

    border-color:
        var(--hyn-navigation-medical-green);

}



/* =============================================================================
   Active Icon
============================================================================= */

.hyn-action-button.is-active
.hyn-action-icon {

    color:
        var(--hyn-navigation-medical-green-strong);

}



/* =============================================================================
   Active Label
============================================================================= */

.hyn-action-button.is-active
.hyn-action-label {

    color:
        var(--hyn-color-text-primary);

}



/* =============================================================================
   Active State Value
============================================================================= */

.hyn-action-button.is-active
.hyn-action-state {

    color:
        var(--hyn-navigation-medical-green-strong);

    font-weight:
        var(--hyn-font-value-weight);

}

/* =============================================================================
   PART 3.4A
   Search Module
============================================================================= */



/* =============================================================================
   Search Module
============================================================================= */

.hyn-search-module {

    display:
        block;

    width:
        100%;

    height:
        var(--hyn-search-module-height);

    margin:
        0;

    padding:
        0;

    background:
        transparent;

}



/* =============================================================================
   Search Container
============================================================================= */

.hyn-search-container {

    display:
        block;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

}



/* =============================================================================
   Search Layout
============================================================================= */

.hyn-search-layout {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

}

/* =============================================================================
   PART 3.4B
   Search Layout Distribution

   Responsibilities

   • Creates the horizontal search layout.
   • Reserves 200px for the Search Pad.
   • Reserves 92px for the Runtime Area.
   • Prevents layout shifting.

============================================================================= */



/* =============================================================================
   Search Pad
============================================================================= */

.hyn-search-pad {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        232px;

    min-width:
        232px;

    max-width:
        232px;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    gap:
        var(--hyn-space-1);

    overflow:
        hidden;

    background:
        transparent;

}

/* =============================================================================
   Search Leading Control
============================================================================= */

.hyn-search-leading-control {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 32px;

    width:
        32px;

    height:
        32px;

    margin:
        0;

    padding:
        0;

    position:
        relative;

    overflow:
        hidden;

}

/* =============================================================================
   Search Runtime
============================================================================= */

.hyn-search-runtime {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    min-width:
        56px;

    max-width:
        56px;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        transparent;

}

/* =============================================================================
   PART 3.4C
   Search Input Components

   Responsibilities

   • Creates the Search Pad layout.
   • Aligns Search Icon.
   • Sizes Search Input.
   • Positions Clear Button.
   • Keeps total width inside 200px.

============================================================================= */



/* =============================================================================
   Search Icon
============================================================================= */

.hyn-search-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    color:
        var(--hyn-color-text-muted);

}


/* =============================================================================
   Search Input
============================================================================= */

.hyn-search-input {

    flex:
        1 1 auto;

    width:
        auto;

    min-width:
        0;

    height:
        32px;

    margin:
        0;

    padding:
        0
        var(--hyn-space-2)
        0
        var(--hyn-space-1);

    font-size:
        var(--hyn-font-ui-lg);

    font-weight:
        var(--hyn-font-weight-regular);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-text-primary);

    background:
        transparent;

    border:
        none;

    outline:
        none;

}



/* =============================================================================
   Search Placeholder
============================================================================= */

.hyn-search-input::placeholder {

    color:
        var(--hyn-color-text-muted);

}



/* =============================================================================
   Search Clear Button
============================================================================= */

.hyn-search-clear-button {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    font-size:
        inherit;

    line-height:
        1;

    background:
        transparent;

    border:
        none;

    color:
        var(--hyn-color-text-muted);

    cursor:
        pointer;

}

/* =============================================================================
   Clear Button Hover
============================================================================= */

.hyn-search-clear-button:hover {

    color:
        var(--hyn-color-primary);

}



/* =============================================================================
   Clear Button Focus
============================================================================= */

.hyn-search-clear-button:focus-visible {

    outline:
        var(--hyn-focus-ring-width)
        solid
        var(--hyn-focus-ring-color);

    outline-offset:
        var(--hyn-focus-ring-offset);

}

/* =============================================================================
   PART 3.4D
   Search Result Area

   Responsibilities

   • Displays runtime search result count.
   • Occupies the fixed 92px result area.
   • Never wraps.
   • Remains vertically centered.

============================================================================= */



/* =============================================================================
   Search Result Area
============================================================================= */

.hyn-search-result-area {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 92px;

    width:
        92px;

    height:
        32px;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

}



/* =============================================================================
   Search Result Count
============================================================================= */

.hyn-search-result-count {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    font-size:
        var(--hyn-font-ui-sm);

    font-weight:
        var(--hyn-font-weight-semibold);

    line-height:
        var(--hyn-line-height-single);

    text-align:
        center;

    color:
        var(--hyn-color-text-secondary);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}



/* =============================================================================
   Runtime Result States
============================================================================= */

.hyn-search-result-count.hyn-has-results {

    color:
        var(--hyn-color-primary);

}



.hyn-search-result-count.hyn-no-results {

    color:
        var(--hyn-color-text-muted);

}



.hyn-search-result-count.hyn-searching {

    color:
        var(--hyn-color-information);

}


/* =============================================================================
   PART 3.4A
   Navigation Area Layout

   Responsibilities

   • Creates the Navigation Area layout.
   • Owns the Navigation Region.
   • Hosts the Scrollable Navigation Container.
   • Defines the only scrollable framework region.

============================================================================= */



/* =============================================================================
   Navigation Area
============================================================================= */

.hyn-panel-navigation-area {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        var(--hyn-navigation-area-height);

    margin:
        0;

    padding:
        var(--hyn-navigation-area-padding-top)
        0
        var(--hyn-navigation-area-padding-bottom)
        0;

    background:
        transparent;


}



/* =============================================================================
   Scrollable Navigation Container

   Owns:

   • Search Module
   • Navigation Module
   • Navigation Tree
   • Runtime Navigation Content

   This is the framework's only scrollable region.

============================================================================= */

.hyn-scrollable-navigation-container {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    height:
        var(--hyn-scrollable-navigation-height);

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    scroll-behavior:
        smooth;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-gutter:
        stable;

    background:
        transparent;

}

/* =============================================================================
   PART 3.5A
   Navigation Module

   Responsibilities

   • Hosts the complete document navigation.
   • Provides the navigation rendering surface.
   • Maintains the recursive navigation tree.
   • Prevents layout shifting.
   • Provides the parent layout for all navigation components.

============================================================================= */



/* =============================================================================
   Navigation Module
============================================================================= */

.hyn-navigation-module {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow-y:
        auto;

    overflow-x:
        hidden;

}



/* =============================================================================
   Navigation Container
============================================================================= */

.hyn-navigation-container {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow:
        visible;

    contain:
        layout paint;

}



/* =============================================================================
   Navigation Layout
============================================================================= */

.hyn-navigation-layout {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow:
        hidden;

}/* =============================================================================
   PART 3.5A
   Navigation Module

   Responsibilities

   • Hosts the complete document navigation.
   • Provides the navigation rendering surface.
   • Maintains the recursive navigation tree.
   • Prevents layout shifting.
   • Provides the parent layout for all navigation components.

============================================================================= */



/* =============================================================================
   Navigation Module
============================================================================= */

.hyn-navigation-module {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow-y:
        auto;

    overflow-x:
        hidden;

}



/* =============================================================================
   Navigation Container
============================================================================= */

.hyn-navigation-container {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow:
        visible;

    contain:
        layout paint;

}



/* =============================================================================
   Navigation Layout
============================================================================= */

.hyn-navigation-layout {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    overflow:
        hidden;

}
  
/* =============================================================================
   PART 3.5B
   Navigation Tree Layout

   Responsibilities

   • Creates the Navigation Tree region.
   • Occupies the remaining scrollable space.
   • Hosts all navigation items.
   • Provides the runtime insertion point.

============================================================================= */



/* =============================================================================
   Navigation List
============================================================================= */

.hyn-navigation-list {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    background:
        transparent;

}



/* =============================================================================
   Navigation Item
============================================================================= */

.hyn-navigation-item {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}



/* =============================================================================
   Navigation Empty State
============================================================================= */

.hyn-navigation-empty {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        var(--hyn-navigation-row-height);

    margin:
        0;

    padding:
        0 var(--hyn-navigation-link-padding-x);

    list-style:
        none;

    color:
        var(--hyn-color-text-muted);

    font-size:
        12px;

    line-height:
        16px;

}


/* =============================================================================
   Navigation Chevron Placeholder
============================================================================= */

.hyn-navigation-chevron-placeholder {

    pointer-events:
        none;

    cursor:
        default;

}


/* =============================================================================
   Navigation Row
============================================================================= */

.hyn-navigation-row {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    width:
        100%;

    height:
        var(--hyn-navigation-row-height);

    margin:
        0;

    padding:
        0;

    gap:
        0;

    overflow:
        hidden;

    background:
        transparent;

}



/* =============================================================================
   Navigation Children
============================================================================= */

.hyn-navigation-children {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    background:
        transparent;

    overflow:
        hidden;

}

/* =============================================================================
   PART 3.5C
   Navigation Components

   Responsibilities

   • Creates the Navigation Chevron.
   • Creates the Navigation Label.
   • Creates the Navigation Meta Area.
   • Defines the internal Link layout.

============================================================================= */



/* =============================================================================
   Navigation Chevron
============================================================================= */

.hyn-navigation-chevron {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 16px;

    width:
        16px;

    min-width:
        16px;

    max-width:
        16px;

    height:
        16px;

    margin:
        0;

    padding:
        2px;

    background:
        transparent;

    border:
        none;

    color:
        var(--hyn-color-text-muted);

    cursor:
        pointer;

    overflow:
        hidden;

}



/* =============================================================================
   Navigation Gap
============================================================================= */

.hyn-navigation-gap {

    display:
        block;

    flex:
        0 0 2px;

    width:
        2px;

    min-width:
        2px;

    max-width:
        2px;

    height:
        100%;

    margin:
        0;

    padding:
        0;

}



/* =============================================================================
   Navigation Link
============================================================================= */

.hyn-navigation-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex:
        1 1 auto;

    min-width:
        0;

    width:
        auto;

    height:
        20px;

    margin:
        0;

    padding:
        0;

    text-decoration:
        none;

    color:
        var(--hyn-color-text-primary);

    background:
        transparent;

    border:
        none;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}



/* =============================================================================
   Navigation Text Area
============================================================================= */

.hyn-navigation-link span,
.hyn-navigation-link {

    font-size:
        12px;

    font-weight:
        var(--hyn-font-weight-medium);

    line-height:
        16px;

}

/* =============================================================================
   PART 3.5D
   Navigation States

   Responsibilities

   • Controls user interaction states.
   • Highlights the active navigation item.
   • Indicates the current reading position.
   • Controls expand / collapse state.
   • Does not control animation.

============================================================================= */



/* =============================================================================
   Navigation Hover
============================================================================= */

.hyn-navigation-row:hover {

    background:
        var(--hyn-navigation-medical-green-soft);

}



/* =============================================================================
   Navigation Focus
============================================================================= */

.hyn-navigation-row:focus-within {

    outline:
        var(--hyn-focus-ring-width)
        solid
        var(--hyn-navigation-medical-green);

    outline-offset:
        var(--hyn-focus-ring-offset);

}



/* =============================================================================
   Navigation Active
============================================================================= */

.hyn-navigation-item.hyn-is-active
> .hyn-navigation-row {

    background:
        var(--hyn-navigation-medical-green-active);

}



/* =============================================================================
   Current Reading
============================================================================= */

.hyn-navigation-item.hyn-is-current
> .hyn-navigation-row {

    border-left:
        2px solid
        var(--hyn-navigation-medical-green);

    padding-left:
        calc(
            var(--hyn-navigation-link-padding-x) - 2px
        );

}



/* =============================================================================
   Expanded State
============================================================================= */

.hyn-navigation-item.hyn-is-expanded
> .hyn-navigation-row
> .hyn-navigation-chevron {

    color:
        var(--hyn-color-primary);

}



/* =============================================================================
   Collapsed State
============================================================================= */

.hyn-navigation-item.hyn-is-collapsed
> .hyn-navigation-row
> .hyn-navigation-chevron {

    color:
        var(--hyn-color-text-muted);

}

/* =============================================================================
   PART 3.5E
   Navigation Animation

   Responsibilities

   • Controls expand / collapse animation.
   • Rotates navigation chevrons.
   • Defines transition timing.
   • Improves interaction smoothness.

============================================================================= */



/* =============================================================================
   Expand / Collapse Animation
============================================================================= */

.hyn-navigation-children {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height var(--hyn-transition-normal);

}



/* =============================================================================
   Expanded
============================================================================= */

.hyn-navigation-item.hyn-is-expanded
> .hyn-navigation-children {

    max-height:
        var(--hyn-navigation-expand-max-height);

}



/* =============================================================================
   Collapsed
============================================================================= */

.hyn-navigation-item.hyn-is-collapsed
> .hyn-navigation-children {

    max-height:
        0;

}



/* =============================================================================
   Chevron Rotation
============================================================================= */

.hyn-navigation-chevron {

    transition:
        transform var(--hyn-transition-normal),
        color var(--hyn-transition-fast);

    transform:
        rotate(0deg);

}



/* =============================================================================
   Expanded Chevron
============================================================================= */

.hyn-navigation-item.hyn-is-expanded
> .hyn-navigation-row
> .hyn-navigation-chevron {

    transform:
        rotate(90deg);

}



/* =============================================================================
   Collapsed Chevron
============================================================================= */

.hyn-navigation-item.hyn-is-collapsed
> .hyn-navigation-row
> .hyn-navigation-chevron {

    transform:
        rotate(0deg);

}

/* =============================================================================
   PART 3.5F
   Runtime States

   Responsibilities

   • Controls runtime-generated navigation states.
   • Synchronizes Observer updates.
   • Highlights Search results.
   • Reserves future runtime extensions.

============================================================================= */




/* =============================================================================
   Search Highlight
============================================================================= */

.hyn-navigation-item[data-search-match="true"]
> .hyn-navigation-row {

    background:
        var(--hyn-color-hover-surface);

}




/* =============================================================================
   Future Runtime States
============================================================================= */

.hyn-navigation-item[data-runtime-state] {

    position:
        relative;

}

/* =============================================================================
   PART 3.6
   Footer Module

   Components

   • Footer Container
   • Clickable Feedback
   • Copyright

============================================================================= */



/* =============================================================================
   Footer Container
============================================================================= */

.hyn-footer-container {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    height: 100%;

    gap: var(--hyn-space-2);

    overflow: visible;

}



/* =============================================================================
   Clickable Feedback
============================================================================= */

.hyn-footer-feedback {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    padding:
        var(--hyn-space-05)
        var(--hyn-space-2);

    min-height:
        var(--hyn-footer-feedback-height);

    font-size:
        var(--hyn-font-ui-xs);

    font-weight:
        var(--hyn-font-weight-medium);

    line-height:
        var(--hyn-line-height-single);

    color:
        var(--hyn-color-primary);

    background:
        transparent;

    border:
        1px
        solid
        var(--hyn-color-border-primary);

    border-radius:
        var(--hyn-radius-pill);

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background var(--hyn-transition-fast),
        color var(--hyn-transition-fast),
        border-color var(--hyn-transition-fast),
        transform var(--hyn-transition-fast);

}



/* =============================================================================
   Feedback Hover
============================================================================= */

.hyn-footer-feedback:hover {

    color:
        var(--hyn-color-text-inverse);

    background:
        var(--hyn-color-primary);

    border-color:
        var(--hyn-color-primary);

    transform:
        translateY(-1px);

}



/* =============================================================================
   Feedback Focus
============================================================================= */

.hyn-footer-feedback:focus-visible {

    outline:
        var(--hyn-focus-ring-width)
        solid
        var(--hyn-focus-ring-color);

    outline-offset:
        var(--hyn-focus-ring-offset);

}



/* =============================================================================
   Copyright
============================================================================= */

.hyn-footer-copyright {

    display:
        block;

    flex:
        1 1 auto;

    min-width:
        0;

    margin:
        0;

    padding:
        0 var(--hyn-space-2) 0 0;

    font-size:
        var(--hyn-font-ui-xs);

    font-weight:
        var(--hyn-font-weight-regular);

    line-height:
        var(--hyn-line-height-single);

    text-align:
        right;

    color:
        var(--hyn-color-text-muted);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}

/* =============================================================================
   PART 4.1
   Responsive CSS
   =============================================================================

   Responsive Breakpoints

   • Desktop
   • Laptop
   • Tablet
   • Mobile

   Responsibilities

   • Adjust panel width
   • Preserve framework architecture
   • Maintain Production Layout Specification
   • Keep module spacing consistent
   • Improve usability on smaller screens

============================================================================= */



/* =============================================================================
   Desktop
   ≥ 1440px
============================================================================= */

@media (min-width: 1440px) {

    .hyn-learning-companion {

        width:
            var(--hyn-panel-width-expanded);

        right:
            var(--hyn-space-6);

    }

}



/* =============================================================================
   Laptop
   1024px — 1439px
============================================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {

    .hyn-learning-companion {

        width:
            var(--hyn-panel-width-laptop);

        right:
            var(--hyn-space-5);

    }

}



/* =============================================================================
   Tablet
   768px — 1023px
============================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .hyn-learning-companion {

        width:
            var(--hyn-panel-width-tablet);

        right:
            var(--hyn-space-4);

    }

}



/* =============================================================================
   Mobile
   ≤ 767px

   Reserved for future Adaptive Layout Specification.
   Disabled in Production Layout Lock v2.1.0.

============================================================================= */

/*

@media (max-width: 767px) {

    .hyn-learning-companion {

        top:
            auto;

        right:
            var(--hyn-space-3);

        bottom:
            var(--hyn-space-3);

        transform:
            none;

        width:
            calc(100vw - (var(--hyn-space-3) * 2));

        min-height:
            420px;

        max-height:
            70vh;

    }

    .hyn-panel {

        border-radius:
            var(--hyn-radius-lg);

    }

    .hyn-panel-fixed-area {

        padding:
            var(--hyn-space-3);

        gap:
            var(--hyn-space-3);

    }

    .hyn-panel-navigation-area {

        padding:
            var(--hyn-space-2);

    }

    .hyn-panel-footer {

        padding:
            var(--hyn-space-3);

    }

}

*/



/* =============================================================================
   Small Mobile
   ≤ 480px

   Reserved for future Adaptive Layout Specification.
   Disabled in Production Layout Lock v2.1.0.

============================================================================= */

/*

@media (max-width: 480px) {

    .hyn-learning-companion {

        right:
            var(--hyn-space-2);

        bottom:
            var(--hyn-space-2);

        width:
            calc(100vw - (var(--hyn-space-2) * 2));

        min-height:
            380px;

    }

    .hyn-brand-container {

        gap:
            var(--hyn-space-2);

    }

    .hyn-overview-grid {

        gap:
            var(--hyn-space-2);

    }

    .hyn-quick-actions-grid {

        gap:
            var(--hyn-space-2);

    }

}

*/



/* =============================================================================
   Framework Layout Adjustments

   Optional runtime overrides.

   Keep disabled unless an Adaptive Layout Profile
   explicitly enables them.

============================================================================= */

/*

@media (max-height: 600px) {

    .hyn-learning-companion {

        max-height:
            90vh;

    }

}

*/

/*

@media (max-height: 600px) {

    .hyn-learning-companion {

        min-height:
            300px;

    }

}

*/


/* =============================================================================
   PART 4.2
   Animation & Runtime States
   =============================================================================

   Runtime State Classes

   • Global Transitions
   • Interaction States
   • Loading State
   • Navigation Expand / Collapse

   NOTE

   Runtime state classes are controlled by JavaScript.

============================================================================= */



/* =============================================================================
   Global Transition
============================================================================= */

.hyn-panel,
.hyn-status-card,
.hyn-overview-card,
.hyn-action-button,
.hyn-search-input,
.hyn-navigation-link,
.hyn-footer-feedback {

    transition:
        background var(--hyn-transition-normal),
        border-color var(--hyn-transition-normal),
        color var(--hyn-transition-normal),
        opacity var(--hyn-transition-normal),
        transform var(--hyn-transition-normal),
        box-shadow var(--hyn-transition-normal);

}



/* =============================================================================
   Interaction States
============================================================================= */


.hyn-is-disabled {

    opacity:
        var(--hyn-disabled-opacity);

    pointer-events:
        none;

    user-select:
        none;

    cursor:
        not-allowed;

}

/* =============================================================================
   Search Runtime State
============================================================================= */

.hyn-search-module.hyn-search-has-value
.hyn-search-icon {

    display:
        none;

}

.hyn-search-module.hyn-search-has-value
.hyn-search-clear-button {

    display:
        flex;

}

/* =============================================================================
   Loading State
============================================================================= */

.hyn-is-loading {

    cursor:
        progress;

}



.hyn-is-loading * {

    pointer-events:
        none;

}



/* =============================================================================
   Navigation Expand / Collapse Animation
============================================================================= */

.hyn-navigation-children {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height var(--hyn-transition-normal);

}



.hyn-navigation-item.hyn-is-expanded
> .hyn-navigation-children {

    max-height:
        var(--hyn-navigation-expand-max-height);

}



.hyn-navigation-item.hyn-is-collapsed
> .hyn-navigation-children {

    max-height:
        0;

}



/* =============================================================================
   Navigation Expand / Collapse Animation
============================================================================= */

@keyframes hyn-status-pulse {

    0% {

        opacity:
            1;

        transform:
            scale(1);

    }

    50% {

        opacity:
            var(--hyn-loading-opacity);

        transform:
            scale(.95);

    }

    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

}



.hyn-status-initializing {

    animation:
        hyn-status-pulse
        var(--hyn-animation-status-duration)
        var(--hyn-animation-easing)
        infinite;

}



/* =============================================================================
   Fade In
============================================================================= */

@keyframes hyn-fade-in {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}



/* =============================================================================
   Slide Up
============================================================================= */

@keyframes hyn-slide-up {

    from {

        opacity:
            0;

        transform:
            translateY(
                var(--hyn-animation-slide-distance)
            );

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}

/* =============================================================================
   PART 5
   Production Utilities
   =============================================================================

   Responsibilities

   • Reusable utility classes
   • Production helper classes
   • Print support
   • Motion accessibility
   • High contrast support

   Utilities never own business logic.
   Utilities must remain reusable across modules.

============================================================================= */



/* =============================================================================
   Display Utilities
============================================================================= */

.hyn-display-none {

    display:
        none !important;

}



.hyn-display-block {

    display:
        block !important;

}



.hyn-display-flex {

    display:
        flex !important;

}



.hyn-display-grid {

    display:
        grid !important;

}



/* =============================================================================
   Flex Utilities
============================================================================= */

.hyn-flex-center {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}



.hyn-flex-between {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}



.hyn-flex-column {

    display:
        flex;

    flex-direction:
        column;

}



/* =============================================================================
   Sizing & Text Utilities
============================================================================= */

.hyn-w-100 {

    width:
        100% !important;

}



.hyn-h-100 {

    height:
        100% !important;

}



.hyn-text-center {

    text-align:
        center !important;

}



/* =============================================================================
   Overflow Utilities
============================================================================= */

.hyn-overflow-hidden {

    overflow:
        hidden !important;

}



.hyn-overflow-auto {

    overflow:
        auto !important;

}



/* =============================================================================
   Border Radius Utilities
============================================================================= */

.hyn-radius-sm {

    border-radius:
        var(--hyn-radius-sm) !important;

}



.hyn-radius-md {

    border-radius:
        var(--hyn-radius-md) !important;

}



.hyn-radius-lg {

    border-radius:
        var(--hyn-radius-lg) !important;

}



.hyn-radius-xl {

    border-radius:
        var(--hyn-radius-xl) !important;

}



.hyn-radius-pill {

    border-radius:
        var(--hyn-radius-pill) !important;

}



/* =============================================================================
   Shadow Utilities
============================================================================= */

.hyn-shadow-sm {

    box-shadow:
        var(--hyn-shadow-sm) !important;

}



.hyn-shadow-md {

    box-shadow:
        var(--hyn-shadow-md) !important;

}



.hyn-shadow-lg {

    box-shadow:
        var(--hyn-shadow-lg) !important;

}



/* =============================================================================
   Pointer Utilities
============================================================================= */

.hyn-pointer {

    cursor:
        pointer !important;

}



.hyn-no-pointer {

    pointer-events:
        none !important;

}



/* =============================================================================
   User Select Utilities
============================================================================= */

.hyn-no-select {

    user-select:
        none !important;

}



.hyn-select-text {

    user-select:
        text !important;

}



/* =============================================================================
   Motion Accessibility
============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .hyn-learning-companion *,
    .hyn-learning-companion *::before,
    .hyn-learning-companion *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }

}



/* =============================================================================
   High Contrast Mode
============================================================================= */

@media (prefers-contrast: more) {

    .hyn-panel {

        border-width:
            var(--hyn-high-contrast-border-width);

    }



    .hyn-action-button,
    .hyn-search-input-container,
    .hyn-navigation-link,
    .hyn-footer-feedback {

        border:
            var(--hyn-high-contrast-border-width)
            solid
            currentColor;

    }

}



/* =============================================================================
   Print
============================================================================= */

@media print {

    .hyn-learning-companion {

        display:
            none !important;

    }

}



/* =============================================================================
   End of Production CSS

   Framework Version : 2.1.0
   Status            : Production Ready

============================================================================= */

/* =============================================================================
   Production Correction Batch 29
   UX contracts: page theme, search highlights, hierarchical navigation,
   founder welcome and permission-based reading continuity.
============================================================================= */

/* Page-wide theme application (site + canonical article surfaces). */
html[data-hyn-theme="dark"] body,
html[data-hyn-theme="dark"] .site,
html[data-hyn-theme="dark"] .site-content,
html[data-hyn-theme="dark"] .site-main,
html[data-hyn-theme="dark"] .ast-container,
html[data-hyn-theme="dark"] article,
html[data-hyn-theme="dark"] .entry-content {
    background-color: var(--hyn-page-background) !important;
    color: var(--hyn-page-text) !important;
}

html[data-hyn-theme="light"] body,
html[data-hyn-theme="light"] .site,
html[data-hyn-theme="light"] .site-content,
html[data-hyn-theme="light"] .site-main,
html[data-hyn-theme="light"] .ast-container,
html[data-hyn-theme="light"] article,
html[data-hyn-theme="light"] .entry-content {
    background-color: var(--hyn-page-background) !important;
    color: var(--hyn-page-text) !important;
}

html[data-hyn-theme] article :is(h1,h2,h3,h4,h5,h6),
html[data-hyn-theme] .entry-content :is(h1,h2,h3,h4,h5,h6) {
    color: var(--hyn-page-heading) !important;
}

html[data-hyn-theme] article :is(p,li,dd,dt,figcaption,blockquote),
html[data-hyn-theme] .entry-content :is(p,li,dd,dt,figcaption,blockquote) {
    color: var(--hyn-page-text) !important;
}

html[data-hyn-theme] article a,
html[data-hyn-theme] .entry-content a {
    color: var(--hyn-page-link) !important;
}

html[data-hyn-theme="dark"] article :is(table,th,td,pre,code,blockquote),
html[data-hyn-theme="dark"] .entry-content :is(table,th,td,pre,code,blockquote) {
    border-color: var(--hyn-page-border) !important;
}

/* Search results: article heading context. */
.hyn-search-heading-match {
    border-radius: 4px;
    box-shadow: inset 5px 0 0 var(--hyn-search-teal);
    background: var(--hyn-search-teal-surface) !important;
    transition: background var(--hyn-transition-fast), box-shadow var(--hyn-transition-fast);
}

.hyn-search-heading-active {
    box-shadow: inset 6px 0 0 var(--hyn-search-teal-strong);
    background: var(--hyn-search-teal-visible) !important;
}

/* Hierarchical navigation: only real parents receive chevrons. */
.hyn-navigation-row:not(.hyn-navigation-row-has-children) > .hyn-navigation-link {
    margin-left: 18px;
}

.hyn-navigation-item[data-level="3"] > .hyn-navigation-row { padding-left: 14px; }
.hyn-navigation-item[data-level="4"] > .hyn-navigation-row { padding-left: 28px; }
.hyn-navigation-item[data-level="5"] > .hyn-navigation-row { padding-left: 42px; }
.hyn-navigation-item[data-level="6"] > .hyn-navigation-row { padding-left: 56px; }

.hyn-navigation-chevron::before {
    content: "›";
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

/* Founder / continuity experience temporarily owns the full navigation area. */
.hyn-panel-navigation-area { position: relative; }

.hyn-navigation-experience {
    position: absolute;
    inset: 2px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--hyn-radius-lg);
    border: 1px solid var(--hyn-color-border-secondary);
    background: var(--hyn-color-surface-primary);
    color: var(--hyn-color-text-primary);
    opacity: 1;
    transition: opacity 200ms ease;
}

.hyn-navigation-experience[hidden] { display: none !important; }
.hyn-navigation-experience-leaving { opacity: 0; }

.hyn-founder-watermark {
    position: absolute;
    inset: 0;
    background-image: url("md-hanif-jewel-founder.webp");
    background-repeat: no-repeat;
    background-position: center 24%;
    background-size: cover;
    opacity: .20;
    pointer-events: none;
}

html[data-hyn-theme="dark"] .hyn-founder-watermark { opacity: .14; }

.hyn-founder-welcome-content,
.hyn-resume-content {
    position: relative;
    z-index: 1;
    width: min(90%, 270px);
    padding: 18px 14px;
    text-align: center;
    border-radius: var(--hyn-radius-lg);
}

.hyn-founder-welcome-content {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 1px 2px var(--hyn-color-surface-primary);
}

.hyn-resume-content {
    background: color-mix(in srgb, var(--hyn-color-surface-primary) 88%, transparent);
    backdrop-filter: blur(2px);
}

.hyn-founder-kicker,
.hyn-resume-kicker {
    font-size: 12px;
    font-weight: 700;
    color: var(--hyn-color-primary);
}

.hyn-founder-name { margin-top: 8px; font-size: 16px; font-weight: 700; }
.hyn-founder-role { font-size: 11px; color: var(--hyn-color-text-secondary); }
.hyn-founder-reading-label { margin-top: 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--hyn-color-text-muted); }
.hyn-founder-page-title { margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 650; line-height: 1.35; }

.hyn-resume-title { margin-top: 5px; font-size: 15px; font-weight: 700; }
.hyn-resume-heading { margin-top: 12px; font-size: 12px; line-height: 1.35; font-weight: 600; }
.hyn-resume-progress { margin-top: 5px; font-size: 11px; color: var(--hyn-color-text-secondary); }
.hyn-resume-actions { display: grid; gap: 7px; margin-top: 16px; }
.hyn-resume-actions button { min-height: 32px; padding: 6px 10px; border-radius: var(--hyn-radius-md); border: 1px solid var(--hyn-color-border-secondary); cursor: pointer; font: inherit; }
.hyn-resume-actions [data-action="continue-reading"] { background: var(--hyn-color-primary); color: var(--hyn-color-text-inverse); border-color: var(--hyn-color-primary); }
.hyn-resume-actions [data-action="start-over"] { background: var(--hyn-color-surface-secondary); color: var(--hyn-color-text-primary); }

@media (prefers-reduced-motion: reduce) {
    .hyn-navigation-experience,
    .hyn-search-heading-match { transition: none; }
}

/* Keep current/search descendant branches visible without mutating user expansion state. */
.hyn-navigation-item[data-current-path="true"] > .hyn-navigation-children,
.hyn-navigation-item[data-search-expanded="true"] > .hyn-navigation-children {
    max-height: var(--hyn-navigation-expand-max-height);
}
.hyn-navigation-item[data-current-path="true"] > .hyn-navigation-row > .hyn-navigation-chevron,
.hyn-navigation-item[data-search-expanded="true"] > .hyn-navigation-row > .hyn-navigation-chevron {
    transform: rotate(90deg);
    color: var(--hyn-color-primary);
}

.hyn-overview-section-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hyn-overview-section-count {
    flex: 0 0 auto;
    margin-left: 4px;
    white-space: nowrap;
    color: var(--hyn-color-text-secondary);
}


/* =============================================================================
   Production Consolidation — Navigation / Search / Founder / Quick Actions
============================================================================= */

:root {
    --hyn-navigation-medical-green: #15803d;
    --hyn-navigation-medical-green-strong: #166534;
    --hyn-navigation-medical-green-soft: #dcfce7;
    --hyn-navigation-medical-green-active: #bbf7d0;

    --hyn-search-teal: #0f766e;
    --hyn-search-teal-strong: #115e59;
    --hyn-search-teal-visible: #5eead4;
    --hyn-search-teal-surface: #99f6e4;
}

/* Independent H1 page-root item. It never owns/clips the H2→H6 tree. */
.hyn-navigation-page-root > .hyn-navigation-row {
    font-weight: 750;
    border-bottom: 1px solid var(--hyn-color-border-secondary);
}

.hyn-navigation-page-root .hyn-navigation-link {
    font-weight: 750;
}

/* Navigation tree owns one bounded, independent vertical scroll viewport. */
#hyn-navigation-module.hyn-navigation-module {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--hyn-navigation-medical-green) transparent;
}

#hyn-navigation-container.hyn-navigation-container,
#hyn-navigation-list.hyn-navigation-list {
    height: auto;
    min-height: max-content;
    overflow: visible !important;
}

/* Expanded branches must never clip long pages. */
.hyn-navigation-item.hyn-is-expanded > .hyn-navigation-children,
.hyn-navigation-item[data-current-path="true"] > .hyn-navigation-children,
.hyn-navigation-item[data-search-expanded="true"] > .hyn-navigation-children {
    max-height: none !important;
}

#hyn-navigation-module::-webkit-scrollbar {
    width: 7px;
}

#hyn-navigation-module::-webkit-scrollbar-track {
    background: transparent;
}

#hyn-navigation-module::-webkit-scrollbar-thumb {
    background: var(--hyn-navigation-medical-green);
    border-radius: 999px;
}

#hyn-navigation-module::-webkit-scrollbar-thumb:hover {
    background: var(--hyn-navigation-medical-green-strong);
}

/* Navigation/Quick Action interaction family = Medical Green. */
#hyn-navigation-list .hyn-navigation-row:hover,
#hyn-navigation-list .hyn-navigation-item:hover > .hyn-navigation-row {
    background: var(--hyn-navigation-medical-green-soft) !important;
}

#hyn-navigation-list .hyn-navigation-row:focus-within {
    outline-color: var(--hyn-navigation-medical-green) !important;
}

#hyn-navigation-list .hyn-navigation-item.hyn-is-active > .hyn-navigation-row,
#hyn-navigation-list .hyn-navigation-item.hyn-is-current > .hyn-navigation-row {
    background: var(--hyn-navigation-medical-green-active) !important;
}

#hyn-navigation-list .hyn-navigation-item.hyn-is-current > .hyn-navigation-row {
    border-left-color: var(--hyn-navigation-medical-green) !important;
}

#hyn-navigation-list .hyn-navigation-item.hyn-is-current .hyn-navigation-link,
#hyn-navigation-list .hyn-navigation-chevron:hover,
#hyn-navigation-list .hyn-navigation-chevron:focus-visible,
#hyn-navigation-list .hyn-navigation-item[data-current-path="true"] > .hyn-navigation-row > .hyn-navigation-chevron,
#hyn-navigation-list .hyn-navigation-item[data-search-expanded="true"] > .hyn-navigation-row > .hyn-navigation-chevron {
    color: var(--hyn-navigation-medical-green-strong) !important;
}

#hyn-quick-actions-module .hyn-action-button:not(:disabled):hover {
    background: var(--hyn-navigation-medical-green-soft) !important;
    border-color: var(--hyn-navigation-medical-green) !important;
}

#hyn-quick-actions-module .hyn-action-button.is-active,
#hyn-quick-actions-module .hyn-action-button[aria-pressed="true"] {
    background: var(--hyn-navigation-medical-green-active) !important;
    border-color: var(--hyn-navigation-medical-green) !important;
}

#hyn-quick-actions-module .hyn-action-button.is-active .hyn-action-icon,
#hyn-quick-actions-module .hyn-action-button.is-active .hyn-action-state,
#hyn-quick-actions-module .hyn-action-button[aria-pressed="true"] .hyn-action-icon,
#hyn-quick-actions-module .hyn-action-button[aria-pressed="true"] .hyn-action-state {
    color: var(--hyn-navigation-medical-green-strong) !important;
}

#hyn-quick-actions-module .hyn-action-button:focus-visible {
    outline-color: var(--hyn-navigation-medical-green) !important;
    border-color: var(--hyn-navigation-medical-green) !important;
}

/* Search = high-contrast Teal, including non-mutating body highlights. */
::highlight(hyn-search-match) {
    background-color: var(--hyn-search-teal-visible);
    color: #042f2e;
}

.hyn-search-body-match {
    background: var(--hyn-search-teal-visible) !important;
    color: #042f2e !important;
    border-radius: 3px;
}

.hyn-search-content-active {
    outline: 3px solid var(--hyn-search-teal) !important;
    outline-offset: 3px;
    background: var(--hyn-search-teal-surface) !important;
}

html[data-hyn-theme="dark"] {
    --hyn-navigation-medical-green: #4ade80;
    --hyn-navigation-medical-green-strong: #86efac;
    --hyn-navigation-medical-green-soft: rgba(22, 163, 74, .24);
    --hyn-navigation-medical-green-active: rgba(34, 197, 94, .38);

    --hyn-search-teal: #2dd4bf;
    --hyn-search-teal-strong: #5eead4;
    --hyn-search-teal-visible: #14b8a6;
    --hyn-search-teal-surface: rgba(45, 212, 191, .34);
}

html[data-hyn-theme="dark"] .hyn-founder-welcome-content {
    text-shadow: 0 1px 3px #000;
}

html[data-hyn-theme="dark"] ::highlight(hyn-search-match) {
    background-color: #14b8a6;
    color: #f0fdfa;
}



/* =============================================================================
   v2.3.1 — Cursor-Controlled Read Aloud
============================================================================= */

:root {
    --hyn-speech-cursor-color: #15803d;
    --hyn-speech-cursor-surface: rgba(34, 197, 94, .10);
}

.entry-content .hyn-speech-cursor,
article .hyn-speech-cursor {
    outline: 2px solid var(--hyn-speech-cursor-color);
    outline-offset: 3px;
    border-radius: 3px;
    background: var(--hyn-speech-cursor-surface);
}

html[data-hyn-theme="dark"] {
    --hyn-speech-cursor-color: #4ade80;
    --hyn-speech-cursor-surface: rgba(34, 197, 94, .16);
}