/* Split out of planets/planets.css (Phase 3 of the module split): the
   Colony Planner's styles, verbatim from the COLONY PLANNER section --
   only the User Planets mode-flip chrome stayed behind. The embedded
   copy remains in planets.css until the Phase 4 cleanup. */

#content-PL {
    width: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    animation: show 0.5s ease-out;
}

/* the planner host scrolls on its own, as it does inside User Planets */
#content-PL > #up_planner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Step 1: template chooser -------------------------------------- */

/* Same 16px side inset as the characters bar above (.up_characters
   margin: 16px 16px 8px) so the planner's tiles line up with the bar's
   own edges. */
.plnr_wrap { padding: 12px 16px; box-sizing: border-box; }

/* Two panels: templates list left (fixed comfortable width), planet
   finder / fit card right (takes the rest). Same card language as the
   harmonized colony tiles: tileBg + borderColor31 + 12px radius. */
.plnr_step1 {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.plnr_panel {
    background-color: var(--tileBg);
    border: 1px solid var(--borderColor31);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plnr_panel_templates { flex: 0 0 28em; }
.plnr_panel_planet { flex: 1 1 auto; }

.plnr_panel_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plnr_panel_title {
    font-family: 'Shentox Medium';
    font-size: 1.33em;
    color: var(--textColor3);
}

/* Boxed buttons, same look as the character-toolbar icons / filter
   reset: color16 ground, 31 border, border brightens on hover. */
.plnr_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--textColor);
    font-family: 'Shentox Medium';
    font-size: 1.04em;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.plnr_btn svg { height: 1.19em; width: 1.19em; fill: currentColor; }
.plnr_btn:hover:not(:disabled) { border-color: var(--borderColor62); color: var(--textColor3); }
.plnr_btn:disabled {
    opacity: 0.45;
    cursor: url(../img/cursors/cursor.svg), default;
}

.plnr_tpl_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.plnr_tpl_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--borderColor31);
    border-radius: 8px;
    background-color: var(--backgroundColor21);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.plnr_tpl_row:hover { border-color: var(--borderColor62); }
/* Selection uses the same #D2D2D2 accent as the map pins' ring2 --
   one accent language across the whole tool. */
.plnr_tpl_row.selected {
    border-color: var(--hoverColor);
    background-color: var(--backgroundColor);
}
.plnr_tpl_row:focus-visible {
    outline: 1px solid var(--hoverColor);
    outline-offset: 1px;
}

.plnr_tpl_name {
    flex: 1 1 auto;
    color: var(--textColor3);
    font-size: 1.11em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plnr_tpl_badge {
    font-size: 0.81em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--textColor);
    border: 1px solid var(--borderColor31);
    border-radius: 999px;
    padding: 2px 8px;
    background-color: var(--color16);
}

.plnr_tpl_empty {
    color: var(--textColor);
    font-size: 1.04em;
    padding: 12px;
    text-align: center;
}

/* Right panel placeholder (Slice 1 replaces this with the finder + fit
   card) -- centered, quiet, clearly intentional. */
.plnr_placeholder {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--textColor);
    font-size: 1.04em;
    min-height: 220px;
}

.plnr_next_row {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .plnr_step1 { flex-direction: column; }
    .plnr_panel_templates { flex: 1 1 auto; }
}

/* ---- Step 1 additions: previews, planet finder, fit card, step 2 ---
   Text sizes are em, calibrated so .plnr_fit_row (the fit-card labels)
   sits at exactly 1em and everything else keeps its original proportion
   to it (old px / 13.5). One inherited font-size now scales the whole
   module together. */

/* The .plnr_step wrappers get display from their own rules, which beats
   the UA sheet's [hidden] -- this override keeps the hidden attribute
   meaning "gone" for the step1 <-> step2 swap (same convention as
   .detail-panel[hidden] etc.). */
.plnr_step[hidden] { display: none !important; }
.plnr_step2 { display: flex; flex-direction: column; gap: 12px; }

/* Server-drawn layout preview -- pins + links from the template's own
   coordinates. Neutral by default; picks up the selection accent with
   the row so the chosen layout reads chosen. */
.plnr_tpl_preview {
    flex: 0 0 3.26em;
    height: 3.26em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plnr_tpl_preview svg { width: 100%; height: 100%; }
.plnr_tpl_preview svg line { stroke: var(--borderColor62); stroke-width: 1; }
.plnr_tpl_preview svg circle { fill: var(--textColor); }
.plnr_tpl_row.selected .plnr_tpl_preview svg circle { fill: var(--hoverColor); }

.plnr_import_msg {
    font-size: 0.96em;
    color: var(--textColor);
    padding: 4px 2px;
}
.plnr_import_msg.error { color: #cc793d; }

/* ---- Planet finder ---- */
.plnr_finder { display: flex; flex-direction: column; gap: 10px; }

.plnr_sys_search { position: relative; }
#plnr_sys_input {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 1.04em;
    outline: none;
    transition: border-color 0.15s ease;
}
#plnr_sys_input:focus { border-color: var(--borderColor62); }
#plnr_sys_input::placeholder { color: var(--textColor2); }

.plnr_sys_results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30; /* same layer the colony filter dropdown panels use */
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    overflow: hidden;
}
.plnr_sys_option {
    padding: 9px 12px;
    font-size: 1.04em;
    color: var(--textColor);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
}
.plnr_sys_option:hover { background-color: #272727; color: var(--textColor3); }

.plnr_sys_title {
    font-size: 1.04em;
    color: var(--textColor3);
    padding: 2px 2px 0;
}

.plnr_planet_list { display: flex; flex-direction: column; gap: 6px; }

.plnr_planet_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--borderColor31);
    border-radius: 8px;
    background-color: var(--backgroundColor21);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.plnr_planet_row img { height: 1.93em; width: 1.93em; }
.plnr_planet_row:not(.locked):hover { border-color: var(--borderColor62); }
.plnr_planet_row.selected {
    border-color: var(--hoverColor);
    background-color: var(--backgroundColor);
}
/* The allowed-planet lock: disallowed types stay VISIBLE (the player
   should see the planet exists) but read and behave as unselectable. */
.plnr_planet_row.locked {
    opacity: 0.35;
    cursor: url(../img/cursors/cursor.svg), default;
}
.plnr_planet_name { flex: 1 1 auto; color: var(--textColor3); font-size: 1.04em; }
.plnr_planet_kind { color: var(--textColor); font-size: 0.93em; }

/* ---- Fit card ---- */
.plnr_fit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 8px;
    padding: 12px 14px;
}
.plnr_fit_row { display: flex; justify-content: space-between; gap: 12px; font-size: 1em; }
.plnr_fit_label { color: var(--textColor); }
.plnr_fit_value { color: var(--textColor3); font-variant-numeric: tabular-nums; }
.plnr_fit_pending .plnr_fit_value { color: var(--textColor2); font-style: italic; }

/* ---- Step 2 stub ---- */
.plnr_step2_bar { display: flex; align-items: center; gap: 16px; }
.plnr_step2_summary { color: var(--textColor3); font-size: 1.11em; }

/* Fit-card over-budget: a sum past the command center's capacity at the
   template's own skill level -- same red family as the attention marks. */
.plnr_fit_value.over { color: #dc3201; }

/* ---- Step 2: top tile, accordion, extractor lane ------------------- */
/* Same em basis as the rest of the module (1em = the fit-card label). */

/* Planner-wide [hidden] override: several planner elements get display
   from their own class rules, which outrank the UA sheet's [hidden] --
   this keeps the attribute meaning "gone" everywhere in the module. */
.plnr_wrap [hidden] { display: none !important; }

.plnr_s2_top {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
}
.plnr_s2_left { flex: 1.2 1 0; display: flex; flex-direction: column; gap: 10px; }
.plnr_s2_name { font-size: 1.26em; font-weight: 700; color: var(--textColor3); }
.plnr_s2_on { color: var(--textColor); font-size: 0.78em; font-weight: 400; }
.plnr_s2_chips { display: flex; gap: 6px; flex-wrap: wrap; }
.plnr_specchip {
    background-color: var(--backgroundColor21);
    border: 1px solid var(--borderColor31);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 0.93em;
    color: var(--textColor);
}
.plnr_specchip b { color: var(--textColor3); font-weight: 600; }
.plnr_specchip.over, .plnr_specchip.over b { color: #dc3201; }
.plnr_s2_actions { margin-top: auto; }

.plnr_s2_map {
    flex: 1 1 0;
    min-width: 20em;
    /* Centered at its own (halved) height instead of stretching to the
       tile's -- the left column sets the tile height, the map hugs its
       svg. */
    align-self: center;
    background-color: #101010;
    border: 1px solid var(--borderColor31);
    border-radius: 8px;
}
.plnr_s2_map > svg { width: 100%; height: 20em; display: block; }
/* Selectable pins -- the same double-circle language as the colony
   maps: faint outer ring on hover, full ring + glow when selected. */
.plnr_map_pin { cursor: url(../img/cursors/cursor_pointer.svg), pointer; }
/* No browser focus box on the pins -- the white rounded square the
   default outline draws around a clicked <g tabindex> read as a second,
   foreign selector on top of the ring language. Selection feedback is
   the ring2 alone; keyboard focus still shows via the faint ring
   (:focus-visible rule below). */
.plnr_map_pin:focus,
.plnr_map_pin:focus-visible { outline: none; }
.plnr_ring2 {
    fill: none;
    stroke: var(--hoverColor);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.plnr_map_pin:hover .plnr_ring2,
.plnr_map_pin:focus-visible .plnr_ring2 { opacity: 0.4; }
.plnr_map_pin.pin-selected .plnr_ring2 {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(210, 210, 210, 0.7));
}

/* Step 2 tab bar (replaced the sideways accordion). Panels keep the
   .plnr_vtile class + plnr_vt_* ids so all lane-switching code is
   untouched; only the presentation changed -- one panel shown at a
   time inside a shared body box under the bar. */
.plnr_tabbar {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    margin-top: 10px;
    border-bottom: 1px solid var(--borderColor31);
}
.plnr_tab {
    padding: 9px 16px;
    margin-bottom: -1px; /* sits on the bar's border so .on can cover it */
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--textColor);
    font-family: 'Shentox Medium';
    user-select: none;
    white-space: nowrap;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: color 0.15s ease;
}
.plnr_tab:hover { color: var(--textColor3); }
.plnr_tab.on {
    background-color: var(--tileBg);
    border-color: var(--borderColor31);
    border-bottom-color: var(--tileBg); /* opens into the body box */
    color: var(--textColor3);
}
/* the Results tab's freshness dot: green right after a run, greyed by
   plannerMarkSimStale when anything changes */
.plnr_tab_dot { font-style: normal; color: #6fcc3d; margin-left: 7px; font-size: 0.8em; }
.plnr_tab_dot.stale { color: var(--textColor); opacity: 0.6; }
.plnr_tab_space { flex: 1; }
.plnr_tabbar .plnr_btn { margin: 0 0 6px; }
.plnr_tabbar #plnr_sim_status { margin: 0 10px 10px; }
.plnr_tabbody {
    background-color: var(--tileBg);
    border: 1px solid var(--borderColor31);
    border-top: none;
    border-radius: 0 0 12px 12px;
}
.plnr_vtile { display: none; }
.plnr_vtile.open { display: block; }
/* every panel is content-sized -- tabs need no reserved height (the
   per-cycle table still scrolls inside its own box) */
.plnr_vbody { padding: 12px 16px 14px; }

/* Extractor lane */
.plnr_ext_cols { display: flex; gap: 18px; align-items: flex-start; }
/* Fixed basis (not content-sized): the Output row's text appearing or
   changing must never re-share the row's width -- the chart keeps its
   size no matter what the left column shows. */
.plnr_ext_inputs { flex: 0 0 27em; max-width: 27em; }
/* min-width low enough that the chart shrinks before the lane ever
   needs a horizontal scrollbar (below ~1100px the lanes stack anyway). */
.plnr_ext_chart { flex: 1 1 auto; min-width: 14em; }
.plnr_frow { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.plnr_fk {
    color: var(--textColor);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 9.6em;
}
.plnr_fnote { color: var(--textColor); font-size: 0.93em; }
.plnr_derived { color: var(--textColor2); font-size: 0.9em; font-style: italic; }
.plnr_frow input[type="number"] {
    width: 8em;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 1em;
    outline: none;
    transition: border-color 0.15s ease;
}
.plnr_frow input[type="number"]:focus { border-color: var(--borderColor62); }

.plnr_chart_k {
    color: var(--textColor);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.plnr_prevchart {
    background-color: #101010;
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
}
.plnr_prevchart svg { width: 100%; height: 8.9em; display: block; }
.plnr_chart_axis {
    display: flex;
    justify-content: space-between;
    color: var(--textColor);
    font-size: 0.85em;
    margin-top: 3px;
}

@media (max-width: 1100px) {
    .plnr_s2_top { flex-direction: column; }
    .plnr_tabbar { flex-wrap: wrap; align-items: center; border-bottom: none; gap: 6px; }
    .plnr_tab { border: 1px solid var(--borderColor31); border-radius: 8px; margin-bottom: 0; }
    .plnr_tab.on { border-color: var(--borderColor62); border-bottom-color: var(--borderColor62); }
    .plnr_tabbody { border-top: 1px solid var(--borderColor31); border-radius: 12px; }
}

/* Extractor lane selects (Resource) -- same field language as the
   number inputs beside them. */
.plnr_frow select {
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 1em;
    outline: none;
    transition: border-color 0.15s ease;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
}
.plnr_frow select:focus { border-color: var(--borderColor62); }

/* Resource switch row -- one icon button per P0 the planet offers,
   radio-style (exactly one active). Same boxed-button language as the
   toolbar icons; active = the module's usual #D2D2D2 accent. */
.plnr_res_row { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; }
.plnr_res_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.9em;
    width: 2.9em;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 0;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.plnr_res_btn img { height: 2.2em; width: 2.2em; }
.plnr_res_btn:hover { border-color: var(--borderColor62); }
.plnr_res_btn.active {
    border-color: var(--hoverColor);
    background-color: var(--backgroundColor);
}

/* Output row under the resource switches -- icon + P1 name + the
   schematic's per-cycle ratio. */
/* min-height reserves the icon's height even while the placeholder
   text is showing, so picking a resource never makes the line jump. */
.plnr_res_out { display: inline-flex; align-items: center; gap: 8px; min-height: 2.2em; }
.plnr_res_out img { height: 2.2em; width: 2.2em; }
.plnr_res_out b { color: var(--textColor3); font-weight: 600; }


/* No spinner arrows on ANY planner number field -- typed values only
   (the arrows nudged tiny steps and mostly invited misclicks). */
.plnr_wrap input[type="number"]::-webkit-outer-spin-button,
.plnr_wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plnr_wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Heads note flips to the warning red when the chosen count exceeds
   what the remaining CPU/powergrid can afford. */
.plnr_fnote.over { color: #dc3201; }

/* Resource-button tooltips open DOWNWARD -- the default opens above,
   and the switch row sits at the top of the accordion body, whose
   overflow-y:auto clips anything above its edge (same fix as the
   .pTools nav tooltips at the top of the page). */
.plnr_res_btn[data-tooltip]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}
.plnr_res_btn[data-tooltip]::after {
    bottom: auto;
    top: 150%;
}

/* Chart with its Y legend OUTSIDE the plot box -- a narrow gutter
   column carries the gridline values (script.js positions each span at
   its gridline's height); the X legend was already outside below. */
.plnr_chart_row { display: flex; gap: 6px; align-items: stretch; }
.plnr_chart_yaxis { position: relative; flex: 0 0 2.4em; }
.plnr_chart_yaxis span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    color: var(--textColor);
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
}
.plnr_chart_row .plnr_prevchart { flex: 1 1 auto; }
/* The X legend aligns with the plot box, not the gutter. */
.plnr_chart_axis { padding-left: 2.9em; }


/* Hints under the chart -- the cycle/fit line and the install-window
   note live below the plot now, out of the inputs column. */
.plnr_chart_hints { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-left: 2.9em; }

/* Output line never wraps (icon + name stay beside the OUTPUT label)
   -- so resource selection can't change the lane's height by a pixel. */
.plnr_res_output_row { flex-wrap: nowrap; }
.plnr_res_out b { white-space: nowrap; }


/* The resource-ratio hint under the chart keeps its line height even
   while empty, so picking a resource never shifts the hint block. */
#plnr_res_ratio { display: block; min-height: 1.25em; }

/* ---- Factories lane: schematic chips + clusters ------------------- */
.plnr_fac_top select {
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 1em;
    outline: none;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_fac_top select:focus { border-color: var(--borderColor62); }

.plnr_fac_grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.plnr_fac_chip {
    background-color: var(--backgroundColor21);
    border: 1px solid var(--borderColor31);
    border-left: 3px solid var(--borderColor31);
    border-radius: 8px;
    padding: 8px 10px;
    width: 13em;
    box-sizing: border-box;
}
.plnr_fac_chip .t { display: flex; justify-content: space-between; font-size: 0.9em; margin-bottom: 6px; }
.plnr_fac_chip .t .id { font-weight: 600; color: var(--textColor3); }
.plnr_fac_chip .t .cluster { color: var(--textColor); }
.plnr_fac_chip select {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 0.93em;
    outline: none;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_fac_chip select:focus { border-color: var(--borderColor62); }
/* Cluster identity as a left edge tint -- four hues cycled, matching
   the sketch's blue/purple plus two spares for bigger colonies. */
.plnr_fac_chip.plnr_cluster_c0 { border-left-color: #4c9be0; }
.plnr_fac_chip.plnr_cluster_c1 { border-left-color: #9a6fd0; }
.plnr_fac_chip.plnr_cluster_c2 { border-left-color: #6fcc3d; }
.plnr_fac_chip.plnr_cluster_c3 { border-left-color: #cc793d; }

/* Map <-> chip link highlight: the chip matching the clicked pin (and
   vice versa) carries the same #D2D2D2 accent as every other selection
   on the site. The cluster tint stays on the left edge. */
.plnr_fac_chip { cursor: url(../img/cursors/cursor_pointer.svg), pointer; transition: border-color 0.15s ease; }
.plnr_fac_chip.hl {
    border-top-color: var(--hoverColor);
    border-right-color: var(--hoverColor);
    border-bottom-color: var(--hoverColor);
}
.plnr_fac_chip.hl:not([class*="plnr_cluster_"]) { border-left-color: var(--hoverColor); }

/* ---- Storage & Routes lane ---------------------------------------- */
.plnr_route_line { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.plnr_route_tag {
    background-color: var(--backgroundColor21);
    border: 1px solid var(--borderColor31);
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.95em;
    color: var(--textColor3);
}
.plnr_route_arrow { color: var(--textColor2); }
.plnr_route_line select {
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 1em;
    outline: none;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_route_line select:focus { border-color: var(--borderColor62); }
.plnr_ok { color: #6fcc3d; }
.plnr_bad { color: #dc3201; }
.plnr_route_sep { color: var(--textColor2); margin: 0 8px; }

/* ---- Building letters, schematic icons, routes tiles, planet bg ---- */

/* Map pin letter badge -- same identity tag the tiles carry. */
.plnr_pin_badge { fill: #161616; stroke: var(--borderColor62); stroke-width: 1; }
.plnr_pin_badge_t { fill: #d2d2d2; font-size: 7px; }
.plnr_s2_map { background-size: cover; background-position: center; }

/* Letter tag on tiles -- small bordered pill, matching the map badge. */
.plnr_tile_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.2em;
    box-sizing: border-box;
    border: 1px solid var(--borderColor62);
    border-radius: 999px;
    background-color: var(--color16);
    color: var(--textColor3);
    font-size: 0.85em;
    font-weight: 600;
}

/* Chosen-schematic commodity icon (chips + apply row) -- native
   <option>s can't carry images, so the icon sits beside the picker and
   tracks its selection. */
.plnr_schem_ico { height: 1.7em; width: 1.7em; visibility: hidden; }
.plnr_fac_chip .t { align-items: center; gap: 6px; }

/* Routes lane building tiles -- same chip language as the factories
   grid; the cluster tint reuses the same left-edge classes. */
.plnr_route_grid { display: flex; flex-wrap: wrap; gap: 8px; }
.plnr_route_tile {
    background-color: var(--backgroundColor21);
    border: 1px solid var(--borderColor31);
    border-left: 3px solid var(--borderColor31);
    border-radius: 8px;
    padding: 8px 10px;
    width: 17em;
    box-sizing: border-box;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_route_tile.plnr_cluster_c0 { border-left-color: #4c9be0; }
.plnr_route_tile.plnr_cluster_c1 { border-left-color: #9a6fd0; }
.plnr_route_tile.plnr_cluster_c2 { border-left-color: #6fcc3d; }
.plnr_route_tile.plnr_cluster_c3 { border-left-color: #cc793d; }
.plnr_route_tile.hl {
    border-top-color: var(--hoverColor);
    border-right-color: var(--hoverColor);
    border-bottom-color: var(--hoverColor);
}
.plnr_route_tile.hl:not([class*="plnr_cluster_"]) { border-left-color: var(--hoverColor); }
.plnr_route_tile_head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.plnr_route_tile_head img { height: 1.7em; width: 1.7em; }
.plnr_route_tile_name { color: var(--textColor3); font-size: 0.93em; }
.plnr_route_tile_cluster { color: var(--textColor); }
.plnr_route_tile_row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.plnr_route_tile_k {
    color: var(--textColor);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 3.4em;
}
.plnr_route_tile_row select {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 0.93em;
    outline: none;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_route_tile_row select:focus { border-color: var(--borderColor62); }
.plnr_route_tile_roles { margin-top: 6px; }

/* One grid per building group in Storage & Routes (hubs / extractors /
   factories) -- stacked rows with a clear seam between groups. */
.plnr_route_grid + .plnr_route_grid { margin-top: 8px; }

/* ---- Drag & Wire on the Step 2 map --------------------------------- */
/* hold-to-arm progress ring around a pressed building */
.plnr_armring {
    fill: none;
    stroke: var(--hoverColor);
    stroke-width: 2;
    opacity: 0.9;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: plnr_armfill 0.5s linear forwards;
    pointer-events: none;
}
@keyframes plnr_armfill { to { stroke-dashoffset: 0; } }

/* set routes: ONE colour, direction carried by the arrows; each segment
   rides beside its link on the lane matching its travel direction */
.plnr_route_flow {
    stroke: var(--hoverColor);
    stroke-width: 1.6;
    fill: none;
    opacity: 0.95;
    stroke-dasharray: 5 5;
    animation: plnr_flow 1s linear infinite;
    pointer-events: none;
}
@keyframes plnr_flow { to { stroke-dashoffset: -10; } }
.plnr_route_arrowhead { fill: var(--hoverColor); pointer-events: none; }
.plnr_ghostwire {
    stroke: var(--hoverColor);
    stroke-width: 2;
    stroke-dasharray: 3 4;
    fill: none;
    pointer-events: none;
}
/* fat invisible grab twin for selecting a route */
.plnr_routehit { stroke: transparent; stroke-width: 10; fill: none; pointer-events: stroke; cursor: url(../img/cursors/cursor_pointer.svg), pointer; }
/* teal = hovering the route's other building, or the route is selected;
   teal routes are re-parented into #plnr_route_top, above the pins */
.plnr_routegrp.rhov .plnr_route_flow, .plnr_routegrp.rsel .plnr_route_flow { stroke: #5ccbcb; }
.plnr_routegrp.rhov .plnr_route_arrowhead, .plnr_routegrp.rsel .plnr_route_arrowhead { fill: #5ccbcb; }
.plnr_routegrp.rsel .plnr_route_flow {
    filter: drop-shadow(0 0 3px rgba(92, 203, 203, 0.6));
    animation-duration: 0.5s;
}

/* wire-drag candidates pulse; the hovered drop target thickens */
.plnr_map_pin.candidate circle:first-child { stroke-dasharray: 4 3; animation: plnr_candspin 1.4s linear infinite; }
@keyframes plnr_candspin { to { stroke-dashoffset: -14; } }
.plnr_map_pin.droptarget circle:first-child { stroke-width: 3.5; }

/* ---- Schematic dropdowns with commodity icons ---------------------- */
.plnr_dd { position: relative; width: 100%; margin-top: 6px; }
.plnr_fac_top .plnr_dd { width: 16em; margin-top: 0; }
.plnr_dd_btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 0.93em;
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
    transition: border-color 0.15s ease;
}
.plnr_dd_btn:hover { border-color: var(--borderColor62); }
.plnr_dd_btn img, .plnr_dd_opt img { height: 1.6em; width: 1.6em; flex: 0 0 auto; }
.plnr_dd_noico { height: 1.6em; width: 1.6em; flex: 0 0 auto; }
.plnr_dd_name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.plnr_dd_caret { color: var(--textColor); flex: 0 0 auto; }
.plnr_dd_panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40; /* over neighbouring chips; same family as the filter panels */
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    max-height: 13em;
    overflow-y: auto;
}
.plnr_dd_panel[hidden] { display: none !important; }
.plnr_dd_opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    font-size: 0.93em;
    color: var(--textColor);
    cursor: url(../img/cursors/cursor_pointer.svg), pointer;
}
.plnr_dd_opt:hover { background-color: #272727; color: var(--textColor3); }

/* factory chips now share the routes tiles' head; give the chip a bit
   more room for icon + name */
.plnr_fac_chip { width: 15em; }

.plnr_routes_top { margin-bottom: 4px; }

/* ---- Slice 3: simulation results row ------------------------------- */
.plnr_resrow { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 10px; }
.plnr_resrow.stale { opacity: 0.45; }
.plnr_res_tile { flex: 1 1 0; min-width: 17em; }
.plnr_res_k {
    color: var(--textColor);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.plnr_res_body { min-height: 2.4em; }
.plnr_bignum { font-size: 1.6em; font-weight: 700; color: var(--textColor3); }
.plnr_bignum small { font-size: 0.55em; color: var(--textColor); font-weight: 400; }
.plnr_bignum small img { height: 1.5em; width: 1.5em; vertical-align: -0.4em; margin: 0 2px 0 6px; }
.plnr_bignum.plnr_warn { color: #dc3201; }
.plnr_dutyrow { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 0.9em; }
.plnr_dutyrow .lbl { width: 1.8em; color: var(--textColor); text-align: center; }
.plnr_dutybar {
    flex: 1;
    height: 9px;
    background-color: var(--backgroundColor21);
    border: 1px solid var(--borderColor31);
    border-radius: 4px;
    overflow: hidden;
}
.plnr_dutybar i { display: block; height: 100%; background-color: #6fcc3d; }
.plnr_dutybar i.low { background-color: #cc793d; }
.plnr_dutybar i.zero { background-color: #dc3201; }
.plnr_dutyrow .pc { width: 3em; text-align: right; font-variant-numeric: tabular-nums; }

/* Pre-existing storage load field on hub tiles */
.plnr_hub_load {
    width: 6.5em;
    box-sizing: border-box;
    background-color: var(--color16);
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--textColor3);
    font-family: inherit;
    font-size: 0.93em;
    outline: none;
    transition: border-color 0.15s ease;
}
.plnr_hub_load:focus { border-color: var(--borderColor62); }

/* Per-cycle results -- toggle button in the Program result tile, and
   the full-width table panel that wraps onto its own line inside the
   (flex-wrap) results row so it dims and hides with the other tiles. */
.plnr_pc_btn { align-self: flex-start; margin-top: 4px; padding: 5px 10px; font-size: 0.9em; }
/* integrated section of the Results tab, not a nested tile: the
   .plnr_panel chrome is stripped so only the heading + scrollable
   table remain, on the tab's own ground */
.plnr_percycle {
    flex-basis: 100%;
    border: none;
    background-color: transparent;
    padding: 6px 0 0;
    gap: 8px;
}
.plnr_pc_scroll {
    max-height: 21em;
    overflow: auto;
    border: 1px solid var(--borderColor31);
    border-radius: 6px;
}
.plnr_pc_table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}
.plnr_pc_table th, .plnr_pc_table td { padding: 4px 10px; text-align: right; white-space: nowrap; }
.plnr_pc_table th {
    position: sticky; /* scroll lives on .plnr_pc_scroll, so this holds */
    top: 0;
    background-color: var(--tileBg);
    color: var(--textColor);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--borderColor31);
    z-index: 2;
}
.plnr_pc_table td { color: var(--textColor); }
.plnr_pc_table tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.025); }
.plnr_pc_table td.over { color: #dc3201; }



/* ==========================================================================
   ATLAS SKIN (approved sketches planner_atlas_sketch / planner_s2_sketch)
   Appended override layer: every rule above keeps the layout working,
   this block re-dresses it in the site's Atlas language -- sharp plates
   on var(--backgroundColor), ghost letterspaced titles, ghost-pill
   buttons, inset-tick selection, chip badges. CSS only: no id, class or
   handler changes. Standalone page only; the embedded copy inside User
   Planets keeps the old skin until Phase 4 removes it.
   ========================================================================== */

/* ---- plates ---- */
.plnr_panel {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    border-radius: 0;
}
.plnr_panel_title {
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    font-size: 0.8571em;
    font-weight: normal;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--textColor2);
}

/* ---- buttons: ghost pills; Next/Simulate carry the accent bar ---- */
.plnr_btn {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    border-radius: 0;
    color: var(--textColor);
    font-size: 0.7857em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.18s linear;
}
.plnr_btn:hover:not(:disabled) { color: var(--themeColor); border-color: var(--borderColor62); background-color: var(--backgroundColor63); }
.plnr_btn_next:not(:disabled), #plnr_sim_btn {
    color: var(--themeColor);
    box-shadow: inset 3px 0 0 var(--themeColor);
}

/* ---- template rows: sharp tiles, inset-tick selection ---- */
.plnr_tpl_row {
    background-color: var(--backgroundColor);
    border: 1px solid #212121;
    border-radius: 0;
}
.plnr_tpl_row:hover { border-color: var(--borderColor62); background-color: var(--backgroundColor63); }
.plnr_tpl_row.selected {
    border-color: var(--borderColor62);
    background-color: #d2d2d208;
    box-shadow: inset 3px 0 0 var(--themeColor);
}
.plnr_tpl_row.selected .plnr_tpl_name { color: var(--themeColor); }
.plnr_tpl_preview { border-radius: 0; background-color: #101010; border: 1px solid #242424; }
.plnr_tpl_badge {
    border: none;
    border-radius: 0;
    background-color: #d2d2d221;
    color: #d2d2d2a0;
    font-size: 0.7143em;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
}
/* community rows ride negative ids -- their badge takes the accent */
.plnr_tpl_row[data-template-id^="-"] .plnr_tpl_badge {
    background: none;
    border: 1px solid #5ccbcb66;
    color: #5ccbcb;
}

/* ---- planet finder ---- */
#plnr_sys_input {
    background-color: #00000060;
    border: 1px solid var(--borderColor31);
    border-radius: 0;
    color: var(--themeColor);
    font-size: 1.0714em;
    letter-spacing: 1px;
    padding: 10px 14px;
}
#plnr_sys_input::placeholder { letter-spacing: 1.5px; }
/* template-first gate: search wakes up once a template is picked */
#plnr_sys_input:disabled {
    opacity: 0.45;
    cursor: default;
    border-style: dashed;
}
.plnr_sys_results { background-color: #0d0d0d; border: 1px solid var(--borderColor31); border-radius: 0; }
.plnr_sys_option { border-radius: 0; }
.plnr_sys_option:hover { background-color: #d2d2d208; color: var(--themeColor); }
.plnr_sys_title {
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--textColor2);
}
.plnr_planet_row { border: 1px solid transparent; border-radius: 0; }
.plnr_planet_row:hover:not(.locked) { border-color: var(--borderColor31); background-color: var(--backgroundColor63); }
.plnr_planet_row.selected {
    border-color: var(--borderColor62);
    background-color: #d2d2d208;
    box-shadow: inset 3px 0 0 var(--themeColor);
}
.plnr_planet_row.selected .plnr_planet_name { color: var(--themeColor); }
.plnr_planet_kind { letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.857em; color: var(--textColor2); }

/* ---- fit card: quiet dotted table rows, uppercase labels ---- */
.plnr_fit { border-radius: 0; background: none; border: none; border-top: 1px solid #212121; }
.plnr_fit_row { border-bottom: 1px dotted #242424; padding: 3px 0; }
.plnr_fit_row:last-child { border-bottom: none; }
.plnr_fit_label { color: var(--textColor2); letter-spacing: 1px; text-transform: uppercase; font-size: 0.9em; }
.plnr_fit_value { color: var(--textColor); }

/* ---- step 2 head: ghost name + chips ---- */
.plnr_s2_name {
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    font-weight: normal;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--themeColor);
}
.plnr_s2_on { letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; }
.plnr_specchip {
    background-color: #d2d2d221;
    border: none;
    border-radius: 0;
    color: #d2d2d2a0;
    font-size: 0.7857em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.plnr_specchip b { color: #d2d2d2; font-weight: normal; }
.plnr_specchip.over { background-color: #cc3d6833; }
.plnr_s2_map { border-radius: 0; border: 1px solid #242424; }
.plnr_s2_map text { pointer-events: none; user-select: none; }

/* ---- tab bar: legend-style buttons (the Atlas activity panel's
   Jumps · Ships · Pods · NPC row) in a #101010 head band, same as the
   Layout plate's. The active button carries the inset accent bar and a
   lifted fill instead of a tab underline. ---- */
.plnr_tabbar { border-bottom: 1px solid #212121; padding: 8px 16px 8px 10px; gap: 6px; align-items: center; }
.plnr_tab {
    border-radius: 0;
    border: 1px solid var(--borderColor31);
    background-color: var(--backgroundColor);
    padding: 7px 18px;
    margin-bottom: 0;
    font-size: 0.857em;
    letter-spacing: 1px;
    text-transform: none;
    color: var(--textColor);
    transition: all 0.15s linear;
}
.plnr_tab:hover { color: var(--themeColor); border-color: var(--borderColor62); }
.plnr_tab.on {
    color: #ffffff;
    background-color: #d2d2d21f;
    border: 1px solid var(--borderColor31);
    box-shadow: inset 3px 0 0 var(--themeColor);
}
.plnr_tab_dot { color: #5ccbcb; }
/* the Run simulation side sits centered in the band; the button is the
   band's LAST item (the status line reorders to its left), its right
   border 16px off the panel edge via the band padding above */
.plnr_tabbar .plnr_btn { margin: 0; order: 1; }
.plnr_tabbar #plnr_sim_status { margin: 0 10px; }
.plnr_tabbody { background-color: var(--backgroundColor); border: 1px solid var(--borderColor31); border-radius: 0; border-top: none; }

/* ---- form rows, inputs, selects, dropdowns ---- */
.plnr_fk { color: var(--textColor2); letter-spacing: 1px; text-transform: uppercase; font-size: 0.9em; }
.plnr_frow input[type="number"], .plnr_hub_load,
.plnr_frow select, .plnr_fac_top select, .plnr_fac_chip select,
.plnr_route_line select, .plnr_route_tile_row select, .plnr_dd_btn {
    background-color: #00000060;
    border: 1px solid var(--borderColor31);
    border-radius: 0;
    color: var(--themeColor);
}
.plnr_dd_panel { background-color: #0d0d0d; border: 1px solid var(--borderColor31); border-radius: 0; }
.plnr_dd_opt { border-radius: 0; }
.plnr_dd_opt:hover { background-color: #d2d2d208; color: var(--themeColor); }
.plnr_derived { font-style: normal; }

/* ---- resource buttons: selectable chips ---- */
.plnr_res_btn {
    background-color: var(--backgroundColor);
    border: 1px solid var(--borderColor31);
    border-radius: 0;
    transition: all 0.15s linear;
}
.plnr_res_btn:hover { color: var(--themeColor); }
.plnr_res_btn.active {
    border-color: var(--borderColor62);
    background-color: #d2d2d208;
    box-shadow: inset 3px 0 0 var(--themeColor);
    color: var(--themeColor);
}

/* ---- charts ---- */
.plnr_prevchart { background-color: #101010; border: 1px solid #242424; border-radius: 0; }

/* ---- factory + route tiles (cluster left-bars stay) ---- */
.plnr_fac_chip, .plnr_route_tile {
    background-color: var(--backgroundColor);
    border-radius: 0;
    border-top-color: #212121;
    border-right-color: #212121;
    border-bottom-color: #212121;
}
.plnr_fac_chip.hl, .plnr_route_tile.hl { border-top-color: var(--borderColor62); border-right-color: var(--borderColor62); border-bottom-color: var(--borderColor62); background-color: var(--backgroundColor63); }
.plnr_route_tag { border-radius: 0; background-color: #d2d2d221; border: none; color: #d2d2d2a0; letter-spacing: 1px; text-transform: uppercase; font-size: 0.7857em; }
.plnr_tile_badge { border-radius: 0; }

/* ---- results ---- */
.plnr_res_k { color: var(--textColor2); letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.7857em; }
.plnr_res_tile { background-color: var(--backgroundColor); border: 1px solid #212121; border-radius: 0; padding: 10px 12px; }
.plnr_bignum { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-weight: normal; color: var(--themeColor); }
.plnr_dutybar { border-radius: 0; background-color: #1c1c1c; border: 1px solid #2a2a2a; }
.plnr_dutybar i { border-radius: 0; }
.plnr_placeholder { color: var(--textColor2); }
/* stockpile form (factory-only templates) in the extractor lane */
/* left-aligned column: the labels' shared min-width lines the inputs up */
.plnr_no_ecu { align-items: flex-start; text-align: left; padding: 16px 18px; }
.plnr_no_ecu .plnr_stock_row { justify-content: flex-start; }
.plnr_no_ecu .plnr_stock_hint { margin-top: 6px; }
/* mixed supply: the hauled-inputs block under the program fields */
#plnr_hauled { margin-top: 14px; padding-top: 10px; border-top: 1px solid #212121; }
#plnr_hauled[hidden] { display: none; }
.plnr_hauled_ico { width: 16px; height: 16px; vertical-align: middle; }
.plnr_hauled_hint { margin-top: 6px; }
.plnr_import_msg { border-radius: 0; }

/* ---- Step 2 arrangement (approved interactive sketch): ONE full-width
   top strip (back · name · chips · copy -- planner.js moves the Back
   button into .plnr_s2_left), the layout map in its own plate on a
   fixed left column, and the tab bar + work body as one plate to its
   right. Pure grid re-placement of the existing elements --
   .plnr_s2_top dissolves (display: contents) so its two children place
   themselves. ---- */
.plnr_step2[hidden] { display: none; }   /* the grid display below would otherwise beat [hidden] */
.plnr_step2 {
    display: grid;
    /* map panel a third of the page, work panel two thirds */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    row-gap: 0;  /* the base flex gap would split the tab bar from its body */
    align-items: start;
}
.plnr_s2_top { display: contents; }
.plnr_s2_left {
    grid-column: 1 / -1;   /* the whole first row is this one strip */
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    min-width: 0;
}
.plnr_s2_left .plnr_s2_chips { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.plnr_s2_actions { margin-top: 0; flex: none; }
/* layout preview: its own plate, same chrome + ghost head as every
   other panel (the head band sits over the planet backdrop the script
   paints on the plate) */
.plnr_s2_map {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: start;
    width: 100%;
    border: 1px solid var(--borderColor31);
    background-color: var(--backgroundColor);
    /* the canvas sits inset in the plate, 8px of plate all around */
    padding: 8px;
    box-sizing: border-box;
    position: relative;  /* anchors the Delete route control in the head band */
}
#plnr_route_del {
    position: absolute;
    top: 5px;
    right: 8px;
    margin: 0;
    padding: 4px 11px;
}
#plnr_route_del:hover { color: #dc3201; }
.plnr_s2_map::before {
    content: "Layout";
    display: block;
    font-family: 'Shentox Light', 'Segoe UI', sans-serif;
    font-size: 0.8571em;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--textColor2);
    padding: 12px 16px;
    border-bottom: 1px solid #212121;
    background-color: #101010;
    /* the head band still spans the full plate width despite the 8px
       canvas inset, with 8px of plate between band and canvas */
    margin: -8px -8px 8px;
}
/* the canvas itself: dark box with a subtle frame; the script paints
   the planet backdrop straight onto it (direct child only -- the
   Delete route button's icon must not inherit canvas sizing) */
.plnr_s2_map > svg {
    height: 20em;
    box-sizing: border-box;
    background-color: #101010;
    border: 1px solid #242424;
}
/* work area: the tab bar tops the body's plate -- shared side borders,
   a #212121 hairline between them, one panel to the eye */
.plnr_tabbar {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    /* head band, same treatment as the Layout plate's */
    background-color: #101010;
    border: 1px solid var(--borderColor31);
    border-bottom: 1px solid #212121;
}
.plnr_tabbody { grid-column: 2; grid-row: 3; min-width: 0; border-top: none; }