/* Capacity and Cost Explorer - layout
   Fixed total height (CANVAS_HEIGHT 700): title, controls, two charts, message.
   The charts take whatever height is left, so the controls and message can wrap on narrow
   screens. Under 700 px the two charts stack vertically. */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
main { display: block; }

#app {
    height: 700px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: white;
}
#title-row {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
    padding: 7px 10px 3px 10px;
    background: aliceblue;
}
#title { font-size: 19px; font-weight: bold; }
#badge { font-size: 12px; color: #6b4a00; background: #fff4d6; border: 1px solid #e0b64c; border-radius: 10px; padding: 1px 8px; }

#controls {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    padding: 2px 10px 4px 10px;
    background: aliceblue;
    border-bottom: 1px solid silver;
}
.ctl { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; flex: 1 1 340px; }
.ctl label { flex: 0 0 auto; font-weight: bold; }
.ctl .val { flex: 0 0 64px; text-align: right; }
.ctl input[type="range"] { flex: 1 1 auto; min-width: 90px; }
.ctl.checks { flex: 1 1 100%; flex-wrap: wrap; gap: 0 22px; }
.ctl label.check { font-weight: normal; white-space: nowrap; }
input:focus-visible { outline: 3px solid orange; outline-offset: 1px; }

#charts {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 4px 6px 4px 4px;
}
.chart-box { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; }
.chart-box canvas { width: 100% !important; height: 100% !important; }

#message {
    flex: 0 0 auto;
    margin: 2px 10px 8px 10px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.35;
    background: white;
    border: 1px solid lightsteelblue;
    border-left: 6px solid #009E73;
    border-radius: 6px;
}
#message.warn { border-left-color: #E69F00; }
#message.dist { border-left-color: #0072B2; }
#message .tier { font-weight: bold; font-size: 15px; }
#message .src { color: #555; font-size: 12px; font-style: italic; }

@media (max-width: 699px) {
    #charts { flex-direction: column; }
    .chart-box:first-child { flex: 0.8 1 0; }
    .chart-box:last-child { flex: 1.2 1 0; }
}
@media (max-width: 519px) {
    #title { font-size: 16px; }
    #badge { font-size: 11px; }
    .ctl { flex: 1 1 100%; font-size: 14px; min-height: 30px; gap: 0 6px; }
    .ctl .val { flex: 0 0 52px; }
    .ctl.checks { gap: 0 14px; }
    #message { font-size: 13px; }
    #message .tier { font-size: 14px; }
}