/*
 * A responsive visual system for a local sector explorer and project workflow.
 * A coordinate map scrolls inside its own region while surrounding controls
 * reflow. A visible focus ring and native controls support an accessibility
 * target; automated and manual checks are still required for conformance.
 */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e5eaf1;background:#0b131d;font-synthesis:none;line-height:1.55;color-scheme:dark;--muted:#acb9ca;--line:#36485a;--gold:#e9bf7a}
*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1440px;margin:auto;padding:24px 5%}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{font:700 25px Georgia,serif;color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:12px}.brand>span:last-child{font:600 17px system-ui;color:#e5eaf1}.edition,.hint,footer{color:var(--muted);font-size:.875rem}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:24px 0 32px}.intro p{color:var(--muted);margin:8px 0}.eyebrow{font-size:.72rem!important;font-weight:700;letter-spacing:.15em;color:var(--gold)!important}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.15;margin:12px 0}h2{font-size:1.35rem;margin:0 0 8px}h3{font-size:1.2rem;margin:0 0 12px}p{margin:8px 0 16px}.local,.badge{font-size:.82rem;border:1px solid var(--line);border-radius:30px;padding:8px 14px;white-space:nowrap;color:#d1e5df}.card{min-width:0;background:#121f2c;border:1px solid var(--line);border-radius:10px;padding:24px}.import{border-top:3px solid var(--gold)}.import>div{max-width:740px}.import p,.project p{color:var(--muted)}.project{margin-top:20px}form{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin-top:20px}form>div:first-child{flex:1;min-width:min(100%,260px)}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px}input,select,button{font:inherit;max-width:100%;border:1px solid #61758a;border-radius:5px;background:#0b1520;color:#e5eaf1;padding:10px 12px;min-height:44px}input{width:100%}input[type=file]{font-size:.875rem}input::file-selector-button{padding:6px;border:0;border-radius:3px;margin-right:10px;font:inherit;background:#e5eaf1;color:#0b1520}button{cursor:pointer;font-weight:600}button:hover{background:#283b4d}.primary{background:var(--gold);border-color:var(--gold);color:#18202b}.primary:hover{background:#f5d4a0}button:disabled{background:#38495b;border-color:#61758a;color:#c3cbd5;cursor:not-allowed}.quiet{background:transparent;border-color:transparent;color:var(--gold);padding-left:0;margin-top:12px}a{color:var(--gold)}:focus-visible{outline:3px solid #85d8ff;outline-offset:4px}#status{padding:12px 0;color:var(--muted)}#review{margin-bottom:24px}.actions{display:flex;gap:12px;flex-wrap:wrap}.sector-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0 16px}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}.section-top{display:flex;align-items:start;justify-content:space-between;gap:15px}.view-control{display:flex;align-items:center;gap:10px}.view-control label{margin:0}.section-top select{font-size:.85rem}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 6px;border-bottom:1px solid var(--line)}td{border-bottom:1px solid var(--line);padding:8px 6px}td:last-child{font-family:ui-monospace,monospace;font-size:.85rem}td button{width:100%;text-align:left;border:0;background:transparent;padding:8px;display:flex;gap:14px;align-items:center}td button span:first-child{color:var(--gold);font:.85rem ui-monospace,monospace}button[aria-pressed=true]{background:#304959;box-shadow:inset 3px 0 var(--gold)}.details h3{font:400 1.8rem Georgia,serif}.details dl{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.3fr);margin-top:24px}.details dt,.details dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.details dt{color:var(--muted);font-size:.9rem}.details dd{font-family:ui-monospace,monospace}summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--gold)}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;border:1px solid var(--line);padding:12px}.map-scroll{overflow:auto;max-height:620px;border:1px solid var(--line)}.map{--s:1;position:relative;width:calc(1540px*var(--s));height:calc(2060px*var(--s));cursor:pointer;background:#0d1925}.map button{cursor:pointer}.map button{position:absolute;width:43px;min-height:43px;padding:3px 0;font:11px ui-monospace,monospace;border-radius:12px}.map button[aria-pressed=true]{border:2px solid var(--gold)}footer{border-top:1px solid var(--line);margin-top:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.skip{position:absolute;top:8px;left:8px;transform:translateY(-180%);background:#fff;color:#000;padding:12px;z-index:10}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#diagnostics{max-height:250px;overflow:auto;padding-left:26px}#diagnostics li{margin-bottom:10px;overflow-wrap:anywhere}
@media(max-width:800px){.workspace{grid-template-columns:minmax(0,1fr)}.intro{display:block}.local{display:inline-block;margin-top:12px}.edition{display:none}header,main,footer{padding-left:5%;padding-right:5%}.card{padding:18px}.section-top{flex-wrap:wrap}.sector-heading{align-items:start;flex-wrap:wrap}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s}}

/* A text-based route panel keeps a navigation result usable without map cues. */
.navigation{margin-top:24px}.navigation h4{margin-bottom:8px}.navigation form{flex-wrap:wrap}.navigation form>div{flex:1 1 12rem;min-width:0}.navigation select{width:100%}.range-worlds{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap}.range-worlds button{font-size:.85rem;text-align:left}.navigation li{overflow-wrap:anywhere}.navigation button{white-space:normal}
/* A required legal notice stays readable and takes a full line on any layout. */
footer{flex-wrap:wrap}#app-version,#privacy,#credit,#legal-notice{flex-basis:100%;margin:12px 0 0;font-size:.8rem;color:var(--muted)}
/* A file name field stays on its own line with its explanation below it. */
#save-form{margin-bottom:16px}#save-form>div{margin-bottom:12px}#project-name-help,#download-kind-help{margin:6px 0 0;font-size:.875rem}#download-kind{width:100%}
/* A new-sector card and a generation form reflow like the project card's forms. */
.start{margin-top:20px}.start p{color:var(--muted)}.generate{margin-bottom:24px}.generate form{margin-top:12px}.generate form>div{flex:1 1 10rem;min-width:0}
/* A system tree indents by depth with a guide line, and a mainworld is marked in text and color. */
.system{margin-top:24px}.system h4{margin:0 0 8px}.system-tree,.system-tree ul{list-style:none;margin:8px 0;padding:0}.system-tree ul{padding-left:18px;border-left:1px solid var(--line);margin-left:6px}.system-tree li{padding:4px 0;overflow-wrap:anywhere}.system-tree .mainworld{color:var(--gold);font-weight:600}#system-pending{padding-left:22px}#system-pending li{overflow-wrap:anywhere}#remove-system{margin-top:12px}.map button.generated{border-style:dashed}
/* An orbit choice lists each option as a full-width radio row with a large target. */
.placement{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.placement h4{margin:0 0 8px}.placement form{display:block;margin-top:12px}.placement fieldset{border:1px solid var(--line);border-radius:6px;margin:0 0 12px;padding:8px 12px;min-width:0}.placement legend{font-weight:600;font-size:.875rem;padding:0 6px}.placement .option{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.95rem;margin:0;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;overflow-wrap:anywhere}.placement .option:last-child{border-bottom:0}.placement .option input{flex:none;width:24px;height:24px;min-height:0;margin:0;padding:0;accent-color:var(--gold)}#around-world{margin-top:16px}
/* An edit form stacks its fields; an error sits next to its field in a high-contrast color. */
.edit{display:block;margin-top:24px}.edit h4{margin:0 0 12px}.edit>div{margin-bottom:12px}.edit textarea{font:inherit;width:100%;max-width:100%;border:1px solid #61758a;border-radius:5px;background:#0b1520;color:#e5eaf1;padding:10px 12px;min-height:44px;resize:vertical}.edit .hint{margin:6px 0 0}.field-error{color:#ffb4a8;font-weight:600;margin:6px 0 0;overflow-wrap:anywhere}[aria-invalid=true]{border-color:#ffb4a8!important}
/* An area form reflows like the generation form; progress and the batch list sit below it. */
.area{margin-bottom:24px}.area form{margin-top:12px}.area form>div{flex:1 1 10rem;min-width:0}.area select{width:100%}.area-progress{margin-top:16px}.area-progress progress{width:100%;height:16px;accent-color:var(--gold)}.area h4{margin:20px 0 8px}.batches{list-style:none;padding:0;margin:0}.batches li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
/* Density adjustments take a full row of the area form, with their own reflowing fields. */
.area .adjustments{flex:1 1 100%;border:1px solid var(--line);border-radius:6px;margin:0;padding:8px 12px 12px;min-width:0}.area .adjustments legend{font-weight:600;font-size:.875rem;padding:0 6px}.adjust-row{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.adjust-row>div{flex:1 1 8rem;min-width:0}.adjust-row select{width:100%}.adjust-list{list-style:none;padding:0;margin:8px 0 0}.adjust-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}.adjust-list:empty{display:none}
/* A world dialog sits over the map with the page's colors, and scrolls when it is taller than the screen. */
.world-dialog{background:#121f2c;color:#e5eaf1;border:1px solid var(--line);border-radius:10px;padding:24px;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}.world-dialog::backdrop{background:rgba(5,10,16,.72)}.world-dialog form{display:block;margin:0}.world-dialog h2{font:400 1.7rem Georgia,serif;margin:4px 0 8px}.world-dialog form>div{margin-bottom:12px}.world-dialog textarea{font:inherit;width:100%;max-width:100%;border:1px solid #61758a;border-radius:5px;background:#0b1520;color:#e5eaf1;padding:10px 12px;min-height:44px;resize:vertical}.world-dialog dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,1.4fr);margin:12px 0 16px}.world-dialog dt,.world-dialog dd{margin:0;padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.world-dialog dt{color:var(--muted);font-size:.9rem}.world-dialog dd{font-family:ui-monospace,monospace}.world-dialog .hint{margin:6px 0 0}#dialog-status{color:var(--muted);min-height:1.5em;margin:8px 0}
/* A map size control; a large map's buttons show a hex and a name, clamped to two lines. */
.map-size{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}.map-size label{margin:0}.map-size .hint{flex-basis:100%;margin:0}.map button{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;line-height:1.15}.map.small button{font-size:9px;border-radius:8px}.map.large button{font-size:12px;padding:4px 5px;border-radius:16px}.map .hex-number{color:var(--gold);font-size:11px}.map .hex-name{font:600 12px system-ui,sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-align:center;max-width:100%}
/* A name tooltip sits beside its hex, above other content, and stays while the pointer is on it. */
.map-tip{position:fixed;z-index:20;max-width:min(280px,calc(100vw - 16px));background:#e5eaf1;color:#0b1520;border-radius:6px;padding:6px 10px;font-size:.875rem;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.45);overflow-wrap:anywhere;pointer-events:auto}
/* A closed world panel gives the worlds card the full width of the workspace. */
.workspace.panel-closed{grid-template-columns:minmax(0,1fr)}.view-control{flex-wrap:wrap;justify-content:flex-end}#panel-toggle{font-size:.85rem}
/* The keyboard cursor marks an empty hex with a dashed outline and no fill. */
.map .hex-cursor{background:transparent;border:2px dashed var(--gold);border-radius:12px}.map .hex-cursor:hover{background:rgba(233,191,122,.12)}
/* Handbook details sit below a body in the system tree, folded until a person opens them. */
.handbook{margin:12px 0}.handbook form{margin-top:8px}.handbook form>div{flex:1 1 10rem;min-width:0}#handbook-remove{margin-top:8px}.system-tree details{margin:4px 0 6px}.system-tree summary{min-height:44px;padding:10px 0;font-weight:400;color:var(--gold)}.system-tree details dl{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.3fr);margin:0 0 8px;font-size:.9rem}.system-tree details dt,.system-tree details dd{margin:0;padding:4px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.system-tree details dt{color:var(--muted)}.system-tree .pending-note{color:var(--muted);font-size:.875rem;margin:4px 0}
/* An area's actions wrap together; the area handbook seed sits below the list. */
.batch-actions{display:flex;flex-wrap:wrap;gap:8px}.area-handbook{margin-top:12px;max-width:28rem}.area-handbook .hint{margin:6px 0 0}
/* The view switch is a pair of radio buttons drawn as tabs, always on show, so the map is easy to find. */
.view-switch{display:inline-flex;border:1px solid #61758a;border-radius:6px;margin:0;padding:0;min-width:0;overflow:hidden}.view-switch label{position:relative;margin:0;font-weight:600;font-size:.875rem}.view-switch input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}.view-switch span{display:flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;color:#e5eaf1}.view-switch label+label span{border-left:1px solid #61758a}.view-switch input:checked+span{background:var(--gold);color:#18202b}.view-switch input:focus-visible+span{outline:3px solid #85d8ff;outline-offset:-3px}
/*
 * The hex map (ADR-0034). A drawn grid sits behind the world buttons; each button covers
 * its hex and is cut to a hexagon, so a click lands on the hex under it. Selection fills
 * the hex, and focus draws an inset ring, because the cut shape would clip an outline.
 */
.map .hex-grid{position:absolute;inset:0;pointer-events:none}.hex-lines{fill:none;stroke:#2e4256;stroke-width:1}.subsector-lines{fill:none;stroke:#6f8aa4;stroke-width:2}.subsector-letter{fill:#16283a;font:700 1px Georgia,serif;text-anchor:middle;dominant-baseline:central}.hex-label{fill:#8297ad;font-family:ui-monospace,monospace;text-anchor:middle}
.map button,.map .hex-glyph{position:absolute;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.map button{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.map .hex-glyph{pointer-events:none;color:#e5eaf1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:600 calc(11px*var(--s)) system-ui,sans-serif;line-height:1.1}
.map button:hover{background:rgba(133,216,255,.12)}.map button[aria-pressed=true]{border:0;background:rgba(233,191,122,.28);box-shadow:inset 0 0 0 calc(3px*var(--s)) var(--gold)}.map button:focus-visible{outline:none;box-shadow:inset 0 0 0 4px #85d8ff}.map button.generated{border:0}
.map .port{color:var(--gold);font:700 calc(10px*var(--s)) ui-monospace,monospace;min-height:1em;margin-top:calc(6px*var(--s))}.map .symbols{display:flex;align-items:center;gap:calc(3px*var(--s))}
.map .world{display:inline-block;width:calc(11px*var(--s));height:calc(11px*var(--s));border-radius:50%}.map .world.water{background:#5fb4ff}.map .world.dry{border:calc(2px*var(--s)) solid #e5eaf1}.map .world.belt{width:calc(13px*var(--s));height:calc(7px*var(--s));border-radius:0;background:radial-gradient(circle,#c9d3dd 30%,transparent 35%) 0 0/calc(4.5px*var(--s)) calc(3.5px*var(--s))}.map .world.none{display:none}
.map .gas-giant{width:calc(5px*var(--s));height:calc(5px*var(--s));border-radius:50%;background:#e5eaf1}.map .base{font-size:calc(8px*var(--s));line-height:1}.map .base.naval{color:#ffd27a}.map .base.scout{color:#9fe0b0}
.map .hex-name{font:600 12px system-ui,sans-serif;max-width:80%;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.map .hex-uwp{font:11px ui-monospace,monospace;color:#acb9ca}
.map .hex-cursor{background:rgba(233,191,122,.12);box-shadow:inset 0 0 0 3px var(--gold)}.map .hex-cursor:focus-visible{box-shadow:inset 0 0 0 4px #85d8ff}
/* The booklet form sits with the project's other outputs. */
#booklet-form{margin-bottom:16px}#booklet-form>div{margin-bottom:12px}#booklet-help{margin:6px 0 0;font-size:.875rem}#booklet-subsector{width:100%}
/*
 * The subsector booklet (ADR-0035) shows only when printing: black on white, a page
 * for the map and legend, a page for the world list, then the worlds, each kept whole.
 */
@media print{
  body{background:#fff;color:#000}body>:not(main),main>:not(#booklet-root){display:none!important}main{padding:0;max-width:none}#booklet-root{display:block!important}
  @page{margin:14mm}
  .booklet{font:10.5pt/1.4 Georgia,serif;color:#000}.booklet h1{font:700 22pt Georgia,serif;margin:0 0 6mm;color:#000}.booklet h2{font:700 14pt Georgia,serif;margin:4mm 0 2mm;color:#000}.booklet h3{font:700 12pt Georgia,serif;margin:0 0 2mm}.booklet h4{font:700 10.5pt Georgia,serif;margin:3mm 0 1mm}
  .booklet-page{break-after:page}.booklet-eyebrow{font:9pt system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#444!important;margin:0}
  .booklet-map{width:100%;max-height:175mm}.b-hex{fill:none;stroke:#888;stroke-width:1}.b-hexnum{font:9px ui-monospace,monospace;fill:#666;text-anchor:middle}.b-port{font:700 13px system-ui,sans-serif;text-anchor:middle;fill:#000}.b-water{fill:#000}.b-dry{fill:#fff;stroke:#000;stroke-width:2}.b-belt{fill:#000}.b-gas{fill:#000}.b-base{font:10px system-ui,sans-serif;text-anchor:middle;fill:#000}.b-name{font:600 11px system-ui,sans-serif;text-anchor:middle;fill:#000}
  .booklet-legend{display:grid;grid-template-columns:auto 1fr;gap:1mm 5mm;margin:0;font-size:9.5pt}.booklet-legend dt{font-weight:700}.booklet-legend dd{margin:0}
  .booklet-table{width:100%;border-collapse:collapse;font:9pt ui-monospace,monospace}.booklet-table caption{text-align:left;font:italic 9pt Georgia,serif;margin-bottom:1mm}.booklet-table th{font:700 8pt system-ui,sans-serif;text-transform:none;letter-spacing:0;color:#000;border-bottom:1.5px solid #000;padding:1mm 2mm 1mm 0;text-align:left}.booklet-table td{border-bottom:.5px solid #bbb;padding:.8mm 2mm .8mm 0;font:9pt ui-monospace,monospace}
  .booklet-summary{margin-top:4mm}.booklet-world{break-inside:avoid;border-top:1px solid #000;padding-top:2mm;margin-bottom:5mm}
  .booklet-facts{display:grid;grid-template-columns:32mm 1fr;gap:.5mm 3mm;margin:0;font-size:9.5pt}.booklet-facts dt{font-weight:700}.booklet-facts dd{margin:0}
  .booklet-bodies{margin:0;padding-left:5mm;font-size:9pt}.booklet-handbook{color:#333;font-size:8.5pt}.booklet-notes{white-space:pre-line;margin:1mm 0}
}
/*
 * The application menu bar (ADR-0036). Each menu is a button that shows or hides a list
 * of actions beneath it, which stays above the page; separators are drawn rules.
 */
header{flex-wrap:wrap}.app-menu{display:flex;gap:4px;margin-right:auto;margin-left:12px}.menu{position:relative}.menu-button{border-color:transparent;background:transparent;font-size:.95rem}.menu-button[aria-expanded=true]{background:#283b4d;border-color:#61758a}
.menu-list{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:15rem;max-width:min(22rem,calc(100vw - 24px));list-style:none;margin:0;padding:6px;background:#121f2c;border:1px solid #61758a;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.menu-list button,.menu-list a{display:flex;width:100%;min-height:44px;align-items:center;justify-content:flex-start;text-align:left;border:0;background:transparent;color:#e5eaf1;padding:8px 12px;border-radius:5px;font:inherit;font-weight:500;text-decoration:none}.menu-list button:hover,.menu-list a:hover{background:#283b4d}.menu-list button:disabled{background:transparent;color:#8897a8}.menu-list button[aria-pressed=true]{box-shadow:none;background:transparent}.menu-list button[aria-pressed=true]::before{content:'✓';width:1.4em;color:var(--gold)}.menu-list button[aria-pressed=false]::before{content:'';width:1.4em}.menu-rule{height:1px;background:var(--line);margin:6px 4px}
#about-dialog p{color:#cdd6e0}
@media(max-width:800px){.app-menu{order:3;flex-basis:100%;margin-left:0}}
/* The user manual reads as a single column, with its keyboard table laid out as pairs. */
.manual main{max-width:52rem}.manual h1{font-size:clamp(2rem,4vw,2.8rem)}.manual section{margin:32px 0;scroll-margin-top:16px}.manual h2{font:400 1.6rem Georgia,serif;margin-bottom:12px}.manual li{margin:6px 0}.manual p,.manual li,.manual dd{color:#d3dce6}.manual #topics ol{columns:2 16rem}.keys{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:6px 18px}.keys dt{font-weight:700}.keys dd{margin:0}