/* style.css - FINAL CLEAN VERSION - Take 5 (Based on Original + Specific Tweaks) */

:root {
    --google-blue: #4285F4;
    --google-green: #0F9D58;
    --google-red: #DB4437;
    --google-yellow: #F4B400;
    --google-grey-900: #202124;
    --google-grey-800: #3c4043;
    --google-grey-700: #5f6368;
    --google-grey-600: #80868b;
    --google-grey-500: #9aa0a6;
    --google-grey-400: #bdc1c6;
    --google-grey-300: #dadce0;
    --google-grey-200: #e8eaed;
    --google-grey-100: #f1f3f4;
    --google-grey-50: #f8f9fa;
    --google-white: #ffffff;

    --md-sys-color-primary: var(--google-blue);
    --md-sys-color-on-primary: var(--google-white);
    --md-sys-color-primary-container: #D2E3FC;
    --md-sys-color-on-primary-container: #081E49;

    --md-sys-color-secondary: var(--google-grey-700);
    --md-sys-color-on-secondary: var(--google-white);
    --md-sys-color-secondary-container: var(--google-grey-200);
    --md-sys-color-on-secondary-container: var(--google-grey-900);

    --md-sys-color-tertiary: var(--google-green);
    --md-sys-color-on-tertiary: var(--google-white);
    --md-sys-color-tertiary-container: #C8F8D5;
    --md-sys-color-on-tertiary-container: #00210B;

    --md-sys-color-error: var(--google-red);
    --md-sys-color-on-error: var(--google-white);
    --md-sys-color-error-container: #FDD8D6;
    --md-sys-color-on-error-container: #410002;
    
    --md-sys-color-neutral: var(--google-grey-600);
    
    --md-sys-color-background: var(--google-grey-50);
    --md-sys-color-on-background: var(--google-grey-900);
    --md-sys-color-surface: var(--google-white);
    --md-sys-color-on-surface: var(--google-grey-900);
    --md-sys-color-surface-variant: var(--google-grey-100);
    --md-sys-color-on-surface-variant: var(--google-grey-700);
    
    --md-sys-color-surface-container-lowest: var(--google-white);
    --md-sys-color-surface-container-low: var(--google-grey-100); 
    --md-sys-color-surface-container: var(--google-grey-200); 
    --md-sys-color-surface-container-high: var(--google-grey-200);
    --md-sys-color-surface-container-highest: var(--google-grey-300);

    --md-sys-color-outline: var(--google-grey-400);
    --md-sys-color-outline-variant: var(--google-grey-300);

    --md-ref-typeface-brand: 'Roboto Flex', 'Roboto', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', 'Roboto', sans-serif;

    --typescale-headline-small-font-family: var(--md-ref-typeface-brand);
    --typescale-headline-small-weight: 400; 
    --typescale-headline-small-size: 24px;
    --typescale-headline-small-line-height: 32px;
    --typescale-headline-small-letter-spacing: 0px;
    --typescale-title-large-size: 22px; 
    --typescale-title-large-line-height: 28px; 
    --typescale-title-medium-font-family: var(--md-ref-typeface-brand);
    --typescale-title-medium-weight: 500;
    --typescale-title-medium-size: 16px;
    --typescale-title-medium-line-height: 24px;
    --typescale-title-medium-letter-spacing: 0.15px;
    --typescale-label-large-font-family: var(--md-ref-typeface-brand);
    --typescale-label-large-weight: 500; 
    --typescale-label-large-size: 14px;
    --typescale-label-large-line-height: 20px;
    --typescale-label-large-letter-spacing: 0.1px;
    --typescale-label-medium-font-family: var(--md-ref-typeface-brand);
    --typescale-label-medium-weight: 500;
    --typescale-label-medium-size: 12px;
    --typescale-label-medium-line-height: 16px;
    --typescale-label-medium-letter-spacing: 0.5px;
    --typescale-label-small-font-family: var(--md-ref-typeface-brand);
    --typescale-label-small-weight: 500;
    --typescale-label-small-size: 11px;
    --typescale-label-small-line-height: 16px;
    --typescale-label-small-letter-spacing: 0.5px;
    --typescale-body-large-font-family: var(--md-ref-typeface-plain);
    --typescale-body-large-weight: 400;
    --typescale-body-large-size: 16px;
    --typescale-body-large-line-height: 24px;
    --typescale-body-large-letter-spacing: 0.15px;
    --typescale-body-medium-font-family: var(--md-ref-typeface-plain);
    --typescale-body-medium-weight: 400;
    --typescale-body-medium-size: 14px;
    --typescale-body-medium-line-height: 20px;
    --typescale-body-medium-letter-spacing: 0.25px;

    --shape-corner-none: 0px;
    --shape-corner-small: 8px;
    --shape-corner-medium: 12px;
    --shape-corner-large: 16px;
    --shape-corner-full: 9999px;

    --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);

    --positive-change-color: var(--google-green);
    --negative-change-color: var(--google-red);
    --hold-change-color: var(--google-grey-700);

    /* Gauge specific (from your original CSS, for text colors if JS uses them) */
    --gauge-strong-sell-color: var(--google-red);
    --gauge-sell-color: #FFA726; 
    --gauge-neutral-color: var(--google-yellow); 
    --gauge-buy-color: #66BB6A; 
    --gauge-strong-buy-color: var(--google-green);
    /* --gauge-indicator-color: var(--google-grey-800); /* From original, not used by SVG */
    /* --gauge-size: 180px; /* From original, not used by SVG */
    /* --gauge-track-width: 20px; /* From original, not used by SVG */
	
	/* Redundant Google Logo Vars from your original CSS - already at top */
	/* --google-logo-blue: #4285F4; ... */
	
    /* Custom Container Colors from your original CSS - already at top or covered by M3 */
    /* --google-blue-container: #D2E3FC; ... */
	--neutral-indicator-bubble-bg-color: #BDBDBD; 
    --neutral-indicator-icon-color: var(--google-grey-900); 
}

body {
    font-family: var(--typescale-body-medium-font-family);
    font-weight: var(--typescale-body-medium-weight);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    letter-spacing: var(--typescale-body-medium-letter-spacing);
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    margin: 0;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.finance-panel-card {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--shape-corner-large);
    padding: 20px 24px;
    box-shadow: var(--elevation-1);
    width: 100%;
    max-width: 720px;
    color: var(--md-sys-color-on-surface);
    box-sizing: border-box;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.company-info .company-name {
    font-family: var(--typescale-headline-small-font-family);
    font-weight: var(--typescale-headline-small-weight);
    font-size: var(--typescale-headline-small-size);
    line-height: var(--typescale-headline-small-line-height);
    letter-spacing: var(--typescale-headline-small-letter-spacing);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 2px 0;
}

.company-info .exchange-info {
    font-family: var(--typescale-label-medium-font-family);
    font-weight: var(--typescale-label-medium-weight);
    font-size: var(--typescale-label-medium-size);
    line-height: var(--typescale-label-medium-line-height);
    letter-spacing: var(--typescale-label-medium-letter-spacing);
    color: var(--md-sys-color-on-surface-variant);
}

.price-info {
    text-align: right;
    white-space: nowrap;
}

.price-info .current-price {
    font-family: var(--typescale-headline-small-font-family);
    font-weight: var(--typescale-headline-small-weight);
    font-size: var(--typescale-headline-small-size);
    line-height: var(--typescale-headline-small-line-height);
    letter-spacing: var(--typescale-headline-small-letter-spacing);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 2px;
}

.price-info .price-change {
    font-family: var(--typescale-label-medium-font-family);
    font-weight: var(--typescale-label-medium-weight);
    font-size: var(--typescale-label-medium-size);
    line-height: var(--typescale-label-medium-line-height);
    letter-spacing: var(--typescale-label-medium-letter-spacing);
}
/* Color for price-change is set by JS */

.timestamp-disclaimer {
    font-family: var(--typescale-label-small-font-family);
    font-weight: var(--typescale-label-small-weight);
    font-size: var(--typescale-label-small-size);
    line-height: var(--typescale-label-small-line-height);
    letter-spacing: var(--typescale-label-small-letter-spacing);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 16px;
}
.timestamp-disclaimer a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    font-weight: var(--typescale-label-small-weight);
}
.timestamp-disclaimer a:hover { text-decoration: underline; }

.article-tab-list-controls {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.article-tab-list-controls::-webkit-scrollbar { display: none; }

.article-tab {
    appearance: none; -webkit-appearance: none; background-color: transparent; border: none;
    border-bottom: 2px solid transparent; padding: 0 16px; margin: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; height: 48px;
    position: relative; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; 
    font-family: var(--typescale-label-large-font-family); font-weight: var(--typescale-label-large-weight);
    font-size: var(--typescale-label-large-size); line-height: var(--typescale-label-large-line-height);
    letter-spacing: var(--typescale-label-large-letter-spacing); color: var(--md-sys-color-on-surface-variant);
    transition: color 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
}
.article-tab .material-symbols-outlined {
    font-size: 18px; margin-right: 8px; color: var(--md-sys-color-on-surface-variant);
    transition: color 0.2s ease-out;
}
.article-tab .tab-text { /* For hiding text on mobile */
    transition: max-width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;
    display: inline-block;
    max-width: 100px; 
    opacity: 1;
    vertical-align: middle;
    overflow: hidden; 
    white-space: nowrap; 
}
.article-tab:hover {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}
.article-tab:hover .material-symbols-outlined { color: var(--md-sys-color-on-surface); }
.article-tab:focus-visible {
    outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px;
    border-radius: var(--shape-corner-small); z-index: 1;
}
.article-tab.active, .article-tab[aria-selected="true"] {
    color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary);
}
.article-tab.active .material-symbols-outlined, .article-tab[aria-selected="true"] .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}
.tab-separator {
    width: 1px; background-color: var(--md-sys-color-outline-variant);
    margin: 12px 8px; flex-shrink: 0;
}

.content-section { display: none; padding-top: 0; } 
.content-section.active { display: block; }

.chart-container {
    height: 280px; background-color: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--shape-corner-medium); border: 1px solid var(--md-sys-color-outline-variant);
    overflow: hidden; position: relative; width: 100%;
}
#stock_chart_div { width: 100%; height: 100%; position: relative; }
#stock_chart_div text, #stock_chart_div .google-visualization-tooltip text {
    font-family: var(--md-ref-typeface-plain) !important;
}
/* NEW: Covering div for grid animation */
.grid-animation-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--md-sys-color-surface-container-lowest); /* Match chart background */
    z-index: 1; /* Above Google Chart grid, below SVG line overlay */
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition for height/scale */
}
.grid-animation-cover.animate-out {
    transform: scaleY(0);
}


/* === Technicals Tab Specific Layout - INTEGRATED CHANGES === */
.technicals-content-area {
    display: flex;
    align-items: flex-start; /* Original */
    gap: 24px; /* Original: 32px, then 24px */
    padding: 16px 0 0 0; /* MODIFIED from original 16px 0, then 16px */
    /* min-height: 280px; /* Removed from original */
    flex-wrap: wrap; 
}

.gauge-container {
    flex: 1 1 60%; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%; 
    min-width: 0; 
    /* NEW: Add a minimum height to help establish dimensions for children if content is sparse */
    min-height: 200px; /* Or a value that makes sense for your smallest gauge + text */
    position: relative; /* Good for children if needed, though not strictly for svg-gauge-wrapper here */
}

#svg-gauge-wrapper {
    width: 90%;   
    max-width: 360px; 
    /* height: auto; /* Keep if aspect-ratio is working well */
    /* aspect-ratio: 360 / 190;  */
    /* Let's try explicit height again for stability, JS will read it */
    height: 190px; /* Fallback to explicit height if aspect-ratio is problematic during init */
    min-height: 150px; 
    max-height: 190px; 
    position: relative; 
    margin-bottom: 4px; 
    /* border: 1px solid limegreen; /* Debugging border */
}

/* NEW: CSS Needle Styles */
#gauge-needle-css {
    width: 4px; /* Needle thickness */
    /* Height will be set by JS based on radius */
    background-color: var(--md-sys-color-on-surface, #202124); /* Needle color */
    border-radius: 2px 2px 0 0; /* Rounded top */
    position: absolute;
    /* Position its bottom center at the SVG's intended pivot point */
    /* These will be adjusted by JS if needed, but set a default */
    left: 50%; 
    bottom: calc(20px + (var(--gauge-label-font-size, 11px) * 1.5)); /* Approx from bottom of SVG to pivot: bottomClearance + arcStroke/2 + labelHeight */
                                                                /* This needs to match JS 'cy' calculation logic relative to bottom */
    transform-origin: bottom center; /* Rotate around its bottom center */
    transform: translateX(-50%) rotate(-90deg); /* Initial position: Strong Sell, correct for left:50% */
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth animation */
    z-index: 1; /* Below SVG labels if they overlap, but above arc potentially */
}
/* Pivot point visualizer (optional, for debugging) */
/* #svg-gauge-wrapper::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(20px + (var(--gauge-label-font-size, 11px) * 1.5)); 
    width: 8px;
    height: 8px;
    background: cyan;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    z-index: 10;
} */

/* Removed old .gauge-indicator-overlay, .gauge-labels, .gauge-label styles from original */
/* as they were for the md-circular-progress gauge */

.gauge-current-value { 
    font-family: var(--md-ref-typeface-plain); /* MODIFIED from --typescale-title-medium */
    font-size: var(--typescale-title-medium-size);
    font-weight: var(--typescale-title-medium-weight); /* MODIFIED from 500 */
    margin-top: 0; /* MODIFIED from original -5px or 4px */
    text-align: center;
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 4px; 
    /* color is set by JS */
}
.gauge-current-value .material-symbols-outlined {
    font-size: 20px; 
    font-variation-settings: 'FILL' 0;
}

/* Summary Panel and Boxes - UPDATED for Google/Material Feel */
.summary-panel {
    /* flex-grow: 1; /* Original */
    /* min-width: 200px; /* Original */
    flex: 1 1 auto; /* MODIFIED: Allow natural sizing */
    min-width: 280px; /* MODIFIED: To fit 3 items better */
    display: flex; 
    flex-direction: column; 
}

.summary-title { 
    font-family: var(--typescale-title-medium-font-family);
    font-weight: var(--typescale-title-medium-weight);
    font-size: var(--typescale-title-medium-size);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 12px 0; 
}

#summary-boxes-container { /* NEW */
    display: flex;
    gap: 10px; 
    justify-content: flex-start; 
}

.summary-box { /* MODIFIED SIGNIFICANTLY from original */
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 8px 12px; 
    border-radius: var(--shape-corner-small); 
    border: 1px solid var(--md-sys-color-outline-variant);
    background-color: transparent; 
    flex: 1 1 0; 
    min-width: 0; 
    /* margin-bottom: 8px; /* Removed, gap handled by parent */
}
/* .summary-box:last-child { margin-bottom: 0; } /* Original */

.summary-box .summary-label-group { /* NEW */
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--typescale-label-medium-font-family); 
    font-weight: var(--typescale-label-medium-weight);
    font-size: var(--typescale-label-medium-size);
}
.summary-box .summary-label-group .material-symbols-outlined { /* NEW */
    font-size: 16px; 
    font-variation-settings: 'FILL' 0;
}

/* Label and Icon Colors for Summary Boxes - NEW/ADJUSTED */
.summary-box.sell-box .summary-label-group { color: var(--google-red); }
.summary-box.neutral-box .summary-label-group { color: var(--google-grey-700); }
.summary-box.buy-box .summary-label-group { color: var(--google-blue); }

.summary-box .summary-value { /* MODIFIED SIGNIFICANTLY - This is now the BUBBLE */
    font-family: var(--typescale-label-large-font-family); 
    font-weight: 500; 
    font-size: var(--typescale-label-large-size);
    color: var(--md-sys-color-on-primary); 
    padding: 4px 10px; 
    border-radius: var(--shape-corner-full); 
    min-width: 28px; 
    height: 28px; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1; 
}
/* Bubble Background Colors - REPLACES old .summary-value background colors */
.summary-box.sell-box .summary-value { background-color: var(--google-red); }
.summary-box.neutral-box .summary-value { 
    background-color: var(--neutral-indicator-bubble-bg-color); 
    color: var(--neutral-indicator-icon-color); 
}
.summary-box.buy-box .summary-value { background-color: var(--google-blue); }

/* Dividers */
md-divider.content-divider { /* The one directly under tabs */
    --md-divider-color: var(--md-sys-color-outline-variant);
    margin-top: 0px; /* MODIFIED from 16px */
    margin-bottom: 16px; /* MODIFIED from 20px */
}
#technicals-summary-divider { /* Divider between summary area and details - NEW */
    margin-top: 20px; 
    margin-bottom: 16px; 
}
#details-section-wrapper + md-divider { /* Divider after key stats/technical details */
    --md-divider-color: var(--md-sys-color-outline-variant);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Key Statistics / Technical Details Title */
.key-stats-title { 
    font-family: var(--typescale-title-medium-font-family);
    font-weight: var(--typescale-title-medium-weight);
    font-size: var(--typescale-title-medium-size);
    line-height: var(--typescale-title-medium-line-height);
    letter-spacing: var(--typescale-title-medium-letter-spacing);
    color: var(--md-sys-color-on-surface);
    margin: 0 0 16px 0;
}
#technical-details-content > .key-stats-title { /* Specific title "Technical Details" - NEW */
    margin-top: 8px; 
}

/* Standard Key Stats Grid - Copied from your original */
.key-stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px;
}
.stat-item { display: flex; flex-direction: column; align-items: flex-start; }
.stat-label {
    font-family: var(--typescale-label-medium-font-family); font-weight: var(--typescale-label-medium-weight);
    font-size: var(--typescale-label-medium-size); line-height: var(--typescale-label-medium-line-height);
    letter-spacing: var(--typescale-label-medium-letter-spacing); color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 2px;
}
.stat-value {
    font-family: var(--typescale-body-large-font-family); font-weight: var(--typescale-body-large-weight);
    font-size: var(--typescale-body-large-size); line-height: var(--typescale-body-large-line-height);
    letter-spacing: var(--typescale-body-large-letter-spacing); color: var(--md-sys-color-on-surface);
}
.stat-value.ai-buy { color: var(--positive-change-color); font-weight: 500; }
.stat-value.ai-sell { color: var(--negative-change-color); font-weight: 500; }
.stat-value.ai-hold { color: var(--hold-change-color); font-weight: 500; }

/* Technical Details Section - NEW/UPDATED */
#technical-details-grid {
    display: flex; flex-direction: column; gap: 16px; margin-top: 8px;
}
.technical-detail-box {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; 
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--shape-corner-medium); 
    background-color: var(--md-sys-color-surface-container-lowest);
}
.technical-detail-item { display: flex; flex-direction: column; gap: 4px; }
.technical-detail-label {
    font-size: var(--typescale-label-medium-size); color: var(--md-sys-color-on-surface-variant);
}
.technical-detail-value-row { display: flex; align-items: center; gap: 8px; }
.technical-detail-value {
    font-size: var(--typescale-body-large-size); font-weight: 500;
    color: var(--md-sys-color-on-surface); order: 2; 
}
.indicator-bubble { 
    width: 24px; height: 24px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; order: 1; 
    color: var(--md-sys-color-on-primary); 
}
.indicator-bubble.buy { background-color: var(--google-blue); }
.indicator-bubble.sell { background-color: var(--google-red); }
.indicator-bubble.neutral {
    background-color: var(--neutral-indicator-bubble-bg-color); 
    color: var(--neutral-indicator-icon-color); 
}
.indicator-bubble .material-symbols-outlined {
    font-size: 18px; font-variation-settings: 'FILL' 1;
}

/* More Details Button Area - Copied from your original */
.finance-panel-card div[style*="justify-content: flex-end"] { margin-top: 20px; }
md-text-button {
    --md-text-button-label-text-font: var(--typescale-label-large-font-family);
    --md-text-button-label-text-size: var(--typescale-label-large-size);
    --md-text-button-label-text-weight: var(--typescale-label-large-weight);
    --md-text-button-label-text-letter-spacing: var(--typescale-label-large-letter-spacing);
    --md-text-button-icon-size: 18px;
}

/* === Responsive Adjustments - UPDATED === */
@media (max-width: 782px) { 
    .technicals-content-area {
        flex-direction: column; 
        align-items: stretch; 
    }
    .gauge-container { /* Gauge now comes first when stacked */
        order: -1; 
        width: 100%; 
        max-width: none; 
        align-items: center; 
        margin-bottom: 24px; 
    }
    .summary-panel { 
        order: 0; /* Summary panel (title + 3 boxes) below gauge */
        width: 100%;
        max-width: none; 
    }
    #summary-boxes-container { 
        justify-content: space-between; 
        width: 100%;
    }
}

@media (max-width: 600px) { 
    .finance-panel-card { padding: 16px; } 
    .key-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; } 
    
    .technical-detail-box { /* Technical Details becomes 2 columns */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px 16px; 
    }
    
    .company-info .company-name, .price-info .current-price { 
        font-size: var(--typescale-title-large-size); 
        line-height: var(--typescale-title-large-line-height);
    }

    .article-tab { 
        padding: 0 12px; 
    }
    .article-tab[data-action] .material-symbols-outlined { margin-right: 0; }
    .article-tab[data-action] .tab-text { 
        max-width: 0; opacity: 0; margin-left: 0; overflow: hidden;
    }
     .article-tab[data-action] { min-width: 48px; }
     .article-tab:not([data-action]) .material-symbols-outlined { margin-right: 8px; }
}

@media (max-width: 480px) { 
    #summary-boxes-container {
        flex-direction: column; 
        align-items: stretch; 
    }
    .technical-detail-box { /* MODIFIED: Technical Details becomes 2 columns, not 1 */
        grid-template-columns: repeat(2, 1fr); 
    }
    #svg-gauge-wrapper { 
        min-height: 160px; 
        height: auto; 
        aspect-ratio: 360 / 190; 
        max-height: 190px; 
    }
}

@media (max-width: 400px) { 
    .key-stats-grid { grid-template-columns: 1fr; }
    .article-tab:not([data-action]) { 
      padding: 10px 8px; 
      font-size: var(--typescale-label-medium-size); 
    }
    .article-tab:not([data-action]) .material-symbols-outlined { 
      margin-right: 4px; 
    }
    .technical-detail-box { /* At very small screens, 1 column is better */
        grid-template-columns: 1fr; 
    }
}