/* ========================================================= */
/* Wind Station                                                */
/* wind.css                                                    */
/* Every selector in this file is scoped under #wind-station   */
/* (by ID ancestor, not just class-name convention) so this     */
/* file cannot alter another Station even if a class name here   */
/* happens to collide with one elsewhere in the app.               */
/* ========================================================= */

/* Local aliases to the shell tokens — same pattern time.css,
   weather.css, tides.css use under their own station ids. */
#wind-station{
    --soft:var(--soft-text);
    --glass-primary:var(--glass);
    --border-soft:var(--glass-border);
    --r-lg:var(--radius-large);
    --r-md:var(--radius-medium);
    --r-sm:var(--radius-small);
    --transition:var(--transition-fast, 160ms ease);
    width:100%;
    max-width:580px;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

/* Wind's primary identity color — teal. Fixed at the same exact value
   in dark, light, and ultra: #28B8B0 is Wind's established brand
   color and is never dimmed/desaturated/substituted per mode.
   --wind-teal-light is a lighter companion/accent only — used for
   secondary tints (small labels, subtle backgrounds), never as the
   primary color of an accent border or the compass vector. */
#wind-station{
    --wind-teal:#28B8B0;
    --wind-teal-light:#80D0D0;
}

/* Truthful fixed wind-speed color scale — the single source of truth
   for gust-speed coloring in the 24-hour graph's gust line. Placeholder
   mph thresholds; product-final values still pending. The scale itself
   is fixed regardless of the selected display unit (see wind.js). */
#wind-station{
    --wind-speed-0:#2B6CF6;
    --wind-speed-10:#22C3C3;
    --wind-speed-20:#3CCF6E;
    --wind-speed-30:#E8D23C;
    --wind-speed-40:#F0932B;
    --wind-speed-50:#E5473A;
    --wind-speed-60:#8B3FD1;
}

/* ── Collapsed shell ── */
#wind-station .wind-bar{position:relative;width:100%;background:var(--glass-primary);border:1.5px solid var(--wind-teal);border-radius:var(--r-lg);padding:5px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background var(--transition)}
#wind-station .wind-bar:hover{background:var(--glass-hover)}
#wind-station .wind-bar-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:14px}

#wind-station .wind-bar-left{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#wind-station .wind-bar-right{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
#wind-station .wind-bar-context{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--wind-teal-light);text-transform:uppercase;line-height:1;margin-bottom:1px}
#wind-station .wind-bar-speed{font-size:14px;font-weight:500;color:var(--text);line-height:1.05}
#wind-station .wind-bar-from{font-size:14px;font-weight:500;color:var(--soft);letter-spacing:.02em;line-height:1.1}
#wind-station .wind-bar-to{font-size:14px;font-weight:500;color:var(--soft);letter-spacing:.02em;line-height:1.1}

/* Center icon column: no fixed width, so it never claims more row
   height than the icon itself needs. Comfortable padding gives the
   icon breathing room within its cell. */
#wind-station .wind-bar-center{position:relative;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* Icon: fixed 96x96 square per spec. object-fit:contain guards against
   distortion if the source asset isn't natively square — it scales the
   image to fit within the box while preserving its own aspect ratio
   rather than stretching it. Never modifies the source asset. */
#wind-station .wind-bar-icon{display:block;width:96px;height:96px;object-fit:contain;position:relative;z-index:1}

#wind-station .wind-bar-gust{font-size:14px;font-weight:500;color:var(--text);line-height:1.05}
#wind-station .wind-bar-gust-label{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--wind-teal-light);text-transform:uppercase;line-height:1.1}
#wind-station .wind-bar-gust-time{font-size:13px;font-weight:500;color:var(--soft);line-height:1.1}

#wind-station #wind-bar-caret{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:5}
#wind-station #wind-bar-caret .expand-icon{transition:transform var(--transition)}
#wind-station #wind-bar-caret.open .expand-icon{transform:rotate(180deg)}
#wind-station .wind-caret-line-a{color:var(--wind-teal)}
#wind-station .wind-caret-line-b{color:var(--wind-teal-light)}

/* ── Expand panel ── */
#wind-station .wind-expand-panel{position:relative;display:none;border:1px solid var(--border-soft);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--glass-primary)}
#wind-station .wind-expand-panel.open{display:block}
#wind-station .wind-expand-inner{padding:16px 16px 18px}

/* Section title, shared by Forecast (Right Now uses .wind-now-heading) */
#wind-station .wind-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}

/* ========================================================= */
/* WIND HERO / RIGHT NOW                                     */
/* ========================================================= */

#wind-station .wind-hero{
    position:relative;
    width:100%;
}

#wind-station .wind-hero-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}

#wind-station .wind-hero-left{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
}

#wind-station .wind-location{
    flex:1 1 auto;
    min-width:0;
    max-width:260px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:5px 8px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
    color:var(--text);
    cursor:pointer;
}

#wind-station .wind-location-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

#wind-station .wind-location-name{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    line-height:1.1;
    font-weight:650;
    color:var(--text);
}

#wind-station .wind-updated{
    margin-top:2px;
    font-size:12px;
    line-height:1;
    font-weight:650;
    letter-spacing:.055em;
    color:var(--soft);
}

#wind-station .wind-location-caret{
    flex:0 0 auto;
    color:var(--wind-teal);
    font-size:9px;
}

#wind-station .wind-hero-controls{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:4px;
}

#wind-station .wind-star-btn,
#wind-station .wind-refresh-btn,
#wind-station .wind-settings-btn,
#wind-station .wind-expand-close-btn{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
    color:var(--soft);
    cursor:pointer;
}

#wind-station .wind-star-btn[aria-pressed="true"]{
    color:var(--wind-teal);
    border-color:var(--wind-teal);
}

#wind-station .wind-alert-slot{
    margin:0 0 12px;
}

#wind-station #wind-location-panel{
    margin:0 0 12px;
}


/* RIGHT NOW */

#wind-station .wind-now{
    padding-top:2px;
}

#wind-station .wind-now-heading{
    display:flex;
    align-items:center;
    margin-bottom:5px;
    font-size:13px;
    font-weight:750;
    letter-spacing:.07em;
    color:var(--wind-teal);
}

#wind-station .wind-compass-instrument{
    display:grid;
    grid-template-columns:80px 244px max-content;
    align-items:center;
    justify-content:center;
    column-gap:14px;
    width:100%;
    margin:2px auto 8px;
}

#wind-station .wind-bearing-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:22px;
    min-width:0;
}

#wind-station .wind-bearing{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    width:100%;
    text-align:right;
}

#wind-station .wind-bearing-from,
#wind-station .wind-bearing-to{
    align-items:flex-end;
    text-align:right;
}

#wind-station .wind-bearing-label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
    color:var(--wind-teal);
}

#wind-station .wind-bearing-cardinal{
    font-size:22px;
    line-height:1;
    font-weight:800;
    color:var(--text);
}

#wind-station .wind-bearing-degrees{
    order:1;
    margin-top:2px;
    font-size:15px;
    line-height:1;
    font-weight:500;
    color:var(--soft);
}

#wind-station .wind-compass-wrap{
    position:relative;
    width:244px;
    height:244px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
}

#wind-station .wind-compass{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

#wind-station .wind-compass-dial{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

#wind-station .wind-compass-ring{
    fill:none;
    stroke:var(--border-soft);
    stroke-width:1.25;
}

#wind-station .wind-compass-minor-tick{
    stroke:var(--soft);
    stroke-width:1.1;
    opacity:.62;
}

#wind-station .wind-compass-major-tick{
    stroke:var(--text);
    stroke-width:1.6;
    opacity:.88;
}

#wind-station .wind-compass-cardinal-tick{
    stroke:var(--wind-teal);
    stroke-width:2.2;
}

#wind-station .wind-compass-tick-label{
    font-size:15px;
    font-weight:800;
    fill:var(--text);
}

#wind-station .wind-compass-tick-deg{
    font-size:11px;
    font-weight:700;
    fill:var(--text);
    opacity:.82;
}

#wind-station .wind-compass-vector{
    stroke:var(--wind-teal);
    stroke-width:4;
    stroke-linecap:butt;
}

#wind-station .wind-compass-arrowhead{
    fill:var(--wind-teal);
}

#wind-station .wind-compass-speed{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

#wind-station .wind-compass-speed-value{
    font-size:42px;
    line-height:.88;
    font-weight:750;
    color:#E8A83E;
    font-variant-numeric:tabular-nums;
}

#wind-station .wind-compass-speed-unit{
    margin-top:5px;
    font-size:12px;
    line-height:1;
    font-weight:750;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--soft);
}

#wind-station .wind-compass-speed-caption{
    margin-top:4px;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    color:#E8A83E;
}

#wind-station .wind-now-metrics{
    width:max-content;
    min-width:190px;
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--border-soft);
    padding-left:18px;
}

#wind-station .wind-now-metric{
    min-height:39px;
    padding:6px 0;
    display:grid;
    grid-template-columns:72px auto;
    align-items:center;
    column-gap:12px;
}

#wind-station .wind-now-metric + .wind-now-metric{
    border-top:1px solid var(--border-soft);
}

#wind-station .wind-now-metric-label{
    margin:0;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.07em;
    color:var(--soft);
    text-align:left;
}

#wind-station .wind-now-metric-value{
    font-size:20px;
    line-height:1;
    font-weight:750;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    text-align:left;
}

#wind-station .wind-now-metric-unit{
    font-size:18px;
}


/* ========================================================= */
/* UNIT CHOOSER                                               */
/* ========================================================= */

#wind-station .wind-unit-dialog{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:20px 14px;
    background:rgba(0,0,0,.72);
    border-radius:0 0 var(--r-lg) var(--r-lg);
}

#wind-station .wind-unit-dialog[hidden]{
    display:none;
}

#wind-station .wind-unit-dialog-card{
    width:min(100%,330px);
    padding:14px;
    border:2px solid rgba(255,255,255,.28);
    border-radius:var(--r-md);
    background:#252A31;
    color:#F5F6F8;
}

#wind-station .wind-unit-dialog-title{
    font-size:13px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.04em;
    color:#F5F6F8;
}

#wind-station .wind-unit-dialog-copy{
    margin-top:5px;
    font-size:11px;
    line-height:1.35;
    color:#B8BEC7;
}

#wind-station .wind-unit-segmented{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:11px;
    padding:2px;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:var(--glass-hover);
}

#wind-station .wind-unit-segment{
    min-height:32px;
    padding:0 8px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--soft);
    font:inherit;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}

#wind-station .wind-unit-segment.selected{
    background:var(--wind-teal);
    color:#071211;
}

#wind-station .wind-unit-dialog-card .wind-unit-segment{
    color:#B8BEC7;
}

#wind-station .wind-unit-dialog-card .wind-unit-segment.selected{
    color:#071211;
}

#wind-station .wind-unit-ok,
#wind-station .wind-settings-ok{
    width:100%;
    min-height:34px;
    margin-top:10px;
    border:1px solid var(--wind-teal);
    border-radius:var(--r-sm);
    background:var(--wind-teal);
    color:#071211;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

#wind-station .wind-unit-ok:disabled,
#wind-station .wind-settings-ok:disabled{
    opacity:.35;
    cursor:default;
}


/* ========================================================= */
/* SETTINGS                                                   */
/* ========================================================= */

#wind-station .wind-settings-panel{
    margin:0 0 10px;
    padding:10px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-sm);
    background:var(--glass-hover);
}

#wind-station .wind-settings-panel[hidden]{
    display:none;
}

#wind-station .wind-settings-title{
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    color:var(--soft);
}


/* Forecast — 24-hour graph + direction rail scroll together as one
   unit inside .wind-graph-scroll; the 7-day selector below does not
   scroll. PX_PER_HOUR in wind.js (60px) matches GRAPH_LEFT_PAD below,
   both mirrored here so canvas sizing and DOM layout agree exactly. */
#wind-station .wind-forecast-section{margin-bottom:4px}

#wind-station .wind-graph-scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-sm);border:1px solid var(--border-soft);background:var(--glass-hover)}
#wind-station .wind-graph-scroll.fit-viewport{overflow-x:hidden}
#wind-station .wind-graph-inner{position:relative;display:flex;flex-direction:column}
#wind-station #wind-graph-canvas{display:block}

#wind-station .wind-graph-time-axis{position:relative;height:20px}
#wind-station .wind-graph-time-label{position:absolute;top:0;font-size:12px;font-weight:500;color:var(--soft);transform:translateX(-50%);white-space:nowrap}

#wind-station .wind-rail{position:relative;height:52px;border-top:1px solid var(--border-soft)}
#wind-station .wind-rail-item{position:absolute;top:6px;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translateX(-50%)}
#wind-station .wind-rail-arrow{width:24px;height:24px;color:var(--wind-teal)}
#wind-station .wind-rail-cardinal{font-size:12px;font-weight:600;color:var(--soft);letter-spacing:.02em}

/* Day/date header — replaces the old static "Forecast" title. Color
   comes from --forecast-day-color, set per render from DAY_COLORS[
   selectedDayIndex] so the header and nav arrows always visually match
   the graph currently on screen. Nav buttons stay in the DOM and are
   only ever disabled (never removed), so the label never re-centers
   when an arrow isn't valid for the current day. */
#wind-station .wind-forecast-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
#wind-station .wind-forecast-header-label{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--forecast-day-color, var(--wind-teal));text-transform:uppercase;text-align:center}
#wind-station .wind-forecast-nav-btn{background:none;border:none;padding:2px 4px;margin:0;font-size:16px;line-height:1;color:var(--forecast-day-color, var(--wind-teal));cursor:pointer;font-family:inherit}
#wind-station .wind-forecast-nav-btn:disabled{visibility:hidden;cursor:default}

/* Compact graph legend — explanatory furniture above the graph, not a
   panel. Sustained sample color is set inline per render to match the
   selected day (DAY_COLORS[selectedDayIndex]); gust sample + the
   speed-color key both use one CSS gradient built from the same 7
   fixed mph stops the canvas gust curve interpolates between, so the
   two always agree (evenly-spaced stops = same linear interpolation
   in CSS as in the canvas color-scale math). Speed-key tick labels are
   built in JS in the user's selected Wind unit. */
#wind-station .wind-graph-legend{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
#wind-station .wind-legend-row{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;color:var(--soft)}
#wind-station .wind-legend-item{display:flex;align-items:center;gap:6px}
#wind-station .wind-legend-swatch{display:inline-block;width:20px;border-radius:2px}
#wind-station .wind-legend-swatch--sustained{height:2px}
#wind-station .wind-legend-swatch--gust{height:4px}
#wind-station .wind-legend-scale-bar{width:100%;height:4px;border-radius:2px}
#wind-station .wind-legend-scale-labels{display:flex;justify-content:space-between;font-size:9px;font-weight:500;color:var(--soft);margin-top:2px}

/* 7-day selector — Today is always exactly Wind teal; the remaining
   six days each get a restrained, distinct companion color. The color
   swatch/underline is a permanent per-day identity; .active marks
   which day is currently graphed, independent of hue, so selecting a
   non-Today day never makes it look teal. */
#wind-station .wind-day-selector{display:flex;gap:5px;margin-top:10px}
#wind-station .wind-day-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 5px;border-radius:var(--r-sm);border:1.5px solid var(--border-soft);background:var(--glass-hover);color:var(--soft);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}
#wind-station .wind-day-chip-swatch{width:14px;height:3px;border-radius:2px}
#wind-station .wind-day-chip.active{color:var(--text);border-color:var(--day-color, var(--wind-teal));background:rgba(40,184,176,.08)}

/* Location panel shell (content built by wind.js). Background, border,
   border-radius, and padding preserved from the pre-Hero implementation;
   margin is governed by the .wind-hero-scoped rule above. */
#wind-station #wind-location-panel{background:var(--glass-hover);border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:10px}

/* ── Light mode ── */
body.light-mode #wind-station .wind-bar,
body.light-mode #wind-station .wind-expand-panel{background:rgba(255,255,255,.72)}
body.light-mode #wind-station .wind-location,
body.light-mode #wind-station .wind-star-btn,
body.light-mode #wind-station .wind-refresh-btn,
body.light-mode #wind-station .wind-settings-btn,
body.light-mode #wind-station .wind-expand-close-btn,
body.light-mode #wind-station .wind-settings-panel,
body.light-mode #wind-station .wind-unit-segmented,
body.light-mode #wind-station .wind-graph-scroll,
body.light-mode #wind-station .wind-day-chip,
body.light-mode #wind-station #wind-location-panel{background:rgba(0,0,0,.04)}

/* Compass — deliberate per-mode surface/contrast around the dial.
   The teal itself (--wind-teal/--wind-teal-light) never changes; only
   the ring stroke contrast is tuned per mode so the dial reads
   clearly against each background. Tick labels use --text/--soft,
   which already adapt across all three modes on their own. */
body.light-mode #wind-station .wind-compass-ring{stroke:rgba(0,0,0,.14)}

body.ultra-mode #wind-station .wind-compass-ring{stroke:rgba(255,255,255,.16)}

/* ── Responsive: content already stacks in a single column at every
   width — this query only tightens sizing for small screens. The
   Forecast graph/rail are deliberately NOT resized here — see
   .wind-graph-scroll above; 24 hours must never compress. ── */
/* ── Narrow-width controls row: five inline controls (location +
   4 fixed icon buttons, in two groups) need to fit on one line down
   to iPhone SE (375px). Shrinking the icon buttons and gaps here —
   rather than ever wrapping — keeps the row's fixed elements fixed
   and leaves the location button, the one flexible element, more
   room. ── */
@media (max-width:520px){

    #wind-station .wind-expand-inner{
        padding-left:12px;
        padding-right:12px;
    }

    #wind-station .wind-hero-header{
        gap:8px;
    }

    #wind-station .wind-hero-controls{
        gap:4px;
    }

    #wind-station .wind-hero-left{
        gap:4px;
    }

    #wind-station .wind-star-btn,
    #wind-station .wind-refresh-btn,
    #wind-station .wind-settings-btn,
    #wind-station .wind-expand-close-btn{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    #wind-station .wind-location{
        padding:6px 8px;
    }

    #wind-station .wind-bar-speed,
    #wind-station .wind-bar-gust{
        font-size:12px;
    }

    #wind-station .wind-bar{
        padding:4px 8px;
    }
}

@media (max-width:480px){

    #wind-station .wind-compass-instrument{
        grid-template-columns:46px 180px minmax(100px,max-content);
        justify-content:center;
        column-gap:5px;
        margin-top:0;
    }

    #wind-station .wind-bearing-stack{
        gap:12px;
    }

    #wind-station .wind-bearing-label{
        font-size:8px;
    }

    #wind-station .wind-bearing-degrees{
        font-size:12px;
    }

    #wind-station .wind-bearing-cardinal{
        font-size:18px;
    }

    #wind-station .wind-compass-wrap{
        width:180px;
        height:180px;
    }

    #wind-station .wind-compass-tick-label{
        font-size:14px;
    }

    #wind-station .wind-compass-tick-deg{
        font-size:9px;
    }

    #wind-station .wind-compass-speed-value{
        font-size:30px;
    }

    #wind-station .wind-compass-speed-unit{
        font-size:9px;
    }

    #wind-station .wind-compass-speed-caption{
        font-size:7px;
    }

    #wind-station .wind-now-metrics{
        min-width:112px;
        padding-left:7px;
    }

    #wind-station .wind-now-metric{
        min-height:28px;
        padding:4px 0;
        grid-template-columns:46px auto;
        column-gap:5px;
    }

    #wind-station .wind-now-metric-label{
        font-size:7px;
    }

    #wind-station .wind-now-metric-value{
        font-size:12px;
    }

    #wind-station .wind-now-metric-unit{
        font-size:10px;
    }

    #wind-station .wind-now-heading{
        font-size:11px;
    }
}

@media (max-width:390px){
    #wind-station .wind-bar-speed,
    #wind-station .wind-bar-gust{
        font-size:11px;
    }
}

@media (max-width:360px){

    #wind-station .wind-compass-instrument{
        grid-template-columns:42px 168px minmax(96px,max-content);
        column-gap:4px;
    }

    #wind-station .wind-compass-wrap{
        width:168px;
        height:168px;
    }

    #wind-station .wind-now-metrics{
        padding-left:5px;
    }

    #wind-station .wind-now-metric{
        grid-template-columns:42px auto;
        column-gap:4px;
    }

    #wind-station .wind-now-metric-value{
        font-size:11px;
    }

    #wind-station .wind-now-metric-unit{
        font-size:9px;
    }
}