/* Class Dashboard Load Estimator - layout
   Fixed total height (CANVAS_HEIGHT 540): title, two slider rows, chart, text panel.
   The chart takes whatever height is left, so the panel can wrap on narrow screens. */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
main { display: block; }

#app {
    height: 540px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: white;
}
#title-row { flex: 0 0 auto; padding: 7px 10px 3px 10px; background: aliceblue; }
#title { font-size: 19px; font-weight: bold; }

#controls { flex: 0 0 auto; padding: 2px 10px 4px 10px; background: aliceblue; }
.row { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; }
.row label { flex: 0 0 auto; width: 205px; }
.row .val { flex: 0 0 36px; text-align: right; font-weight: bold; }
.row input[type="range"] { flex: 1 1 auto; min-width: 100px; }
input:focus-visible { outline: 3px solid orange; outline-offset: 1px; }

#chart-wrap {
    flex: 1 1 auto;
    min-height: 160px;
    position: relative;
    background: aliceblue;
    border-bottom: 1px solid silver;
    padding: 2px 8px 4px 4px;
}
#chart-wrap canvas { width: 100% !important; height: 100% !important; }

#panel {
    flex: 0 0 auto;
    margin: 7px 10px 8px 10px;
    padding: 7px 10px;
    font-size: 15px;
    line-height: 1.35;
    background: white;
    border: 1px solid lightsteelblue;
    border-left: 6px solid steelblue;
    border-radius: 6px;
}
#panel .msg { font-size: 17px; font-weight: bold; margin: 2px 0 3px 0; }
#panel .band-ok { border-left-color: #009E73; }
#panel .f { color: #555; }
#panel .note { color: #555; font-size: 14px; font-style: italic; margin-top: 3px; }

@media (max-width: 519px) {
    .row { flex-wrap: wrap; gap: 0 8px; min-height: 0; padding: 2px 0; }
    .row label { width: auto; flex: 1 1 auto; }
    .row input[type="range"] { flex: 1 1 100%; }
    #panel { font-size: 14px; }
    #panel .msg { font-size: 16px; }
}