/* Objectives Neighborhood of the Learning Graph - layout
 * Total height = header 36 + body 520 + toolbar 46 = 602 (CANVAS_HEIGHT 602)
 */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: white;
}

main { display: block; }

#app {
    width: 100%;
    height: 602px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: aliceblue;
}

#header {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid silver;
}

.title { font-size: 18px; font-weight: bold; }
.source-note { font-size: 12px; color: dimgray; }

#body {
    height: 520px;
    display: flex;
    flex-direction: row;
}

#network-wrap {
    position: relative;
    flex: 2 1 0;
    min-width: 0;
    height: 100%;
}

#network {
    width: 100%;
    height: 100%;
    background: aliceblue;
}

#panel {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    background: white;
    border-left: 1px solid silver;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.35;
}

.legend { border-bottom: 1px solid gainsboro; padding-bottom: 6px; margin-bottom: 8px; }
.legend-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 2px 0; flex-wrap: wrap; }
.legend-row.nowrap { flex-wrap: nowrap; align-items: flex-start; }
.legend-row.small { color: dimgray; font-size: 12px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid gray; flex: none; }
.sw-selected { background: gold; border-color: darkgoldenrod; }
.sw-prereq { background: lightgreen; border-color: green; }
.sw-dependent { background: orange; border-color: chocolate; }
.sw-obj { background: lightsteelblue; border-color: slateblue; }
.sw-other { background: gainsboro; border-color: gray; }
.arrow-key { color: dimgray; font-size: 13px; flex: none; }

#info h3 { margin: 0 0 4px 0; font-size: 17px; }
#info .cat { display: inline-block; font-size: 12px; color: white; background: slateblue; border-radius: 8px; padding: 1px 7px; margin-bottom: 6px; }
#info .cat.other { background: gray; }
#info .def { margin: 4px 0 8px 0; }
#info .cis { font-weight: bold; margin-bottom: 8px; }
#info .list-title { font-weight: bold; margin-top: 6px; }
#info .list-title.pre { color: green; }
#info .list-title.dep { color: chocolate; }
#info ul { margin: 2px 0 6px 0; padding-left: 18px; }
#info li { margin: 1px 0; }
#info .hint { color: dimgray; }
#info .good { color: green; font-weight: bold; }
#info .bad { color: firebrick; font-weight: bold; }
#info .note { color: dimgray; font-size: 12px; }

#toolbar {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 10px;
    background: white;
    border-top: 1px solid silver;
    font-size: 15px;
}

#toolbar button { font-size: 15px; padding: 4px 12px; cursor: pointer; }
#score { margin-left: auto; font-weight: bold; color: navy; }
.toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* Narrow: panel moves below the network; total height stays 602 */
@media (max-width: 599px) {
    #body { flex-direction: column; }
    #network-wrap { flex: none; height: 300px; }
    #panel { flex: none; height: 220px; border-left: none; border-top: 1px solid silver; }
    #toolbar { gap: 8px; font-size: 12px; white-space: nowrap; }
    #toolbar button { font-size: 13px; padding: 3px 8px; }
    .wide-only { display: none; }
    .legend-row { font-size: 12px; margin: 1px 0; }
    .title { font-size: 15px; }
    .source-note { display: none; }
}