*{box-sizing:border-box}body{margin:0;background:#eef3ef;font:12px Arial,Helvetica,sans-serif;color:#111}.app{width:878px;min-height:565px;margin:0 auto;background:#f7f7f2;border:2px solid #014712;box-shadow:0 0 0 3px #BE9843 inset}.titlebar{height:35px;background:#014712;color:white;padding:8px 10px;font-size:15px;font-weight:bold;border-bottom:3px solid #BE9843}.icon{margin-right:8px}.topgrid{display:grid;grid-template-columns:380px 318px 1fr;gap:8px;padding:6px 8px 4px}.box{border:2px solid #014712;padding:8px 9px 7px;min-height:102px;background:#fff}legend{font-weight:bold;color:#014712;background:#fff;padding:0 4px}.eclipse-types>label{display:inline-block;margin-right:18px}.type-lists{display:flex;gap:24px;margin-top:7px}.listbox{width:95px;height:61px;background:#eee;border:1px solid #bbb;padding:2px}.listbox label{display:block;height:14px}.sel{background:#BE9843;color:white}.sarosbox{color:#666}input,select,button{font:12px Arial,Helvetica,sans-serif;border:1px solid #014712;background:#fff;height:22px}input[type=checkbox]{width:13px;height:13px;vertical-align:middle}.sarosbox input{width:55px}.aspects label{display:block;margin-bottom:7px}.aspects input[disabled]{color:#666}.aspects select{width:100%;color:#666}.minirow{display:flex;align-items:center;gap:6px;margin-top:4px}.minirow button{width:95px;color:#777}.searchrange label{display:flex;align-items:center;gap:4px;margin-bottom:4px}.searchrange input{width:102px}.searchbtn{width:132px;height:35px;margin-top:5px;color:#fff;background:#014712;font-weight:bold;font-size:14px;border:2px solid #BE9843;cursor:pointer}.messagebox{height:69px;margin:2px 8px 8px;background:#fff;border:2px solid #014712;padding:5px;overflow:auto;font:12px 'Courier New',monospace}.err{color:#a00}.mainrow{display:grid;grid-template-columns:1fr 137px;gap:8px;padding:0 8px 8px}.tablewrap{height:305px;overflow:auto;background:white;border:2px solid #014712}.eclipses{border-collapse:collapse;width:100%;font:12px 'Arial Narrow',Arial,sans-serif}.eclipses th{position:sticky;top:0;background:#BE9843;color:white;border:1px solid #014712;border-top:none;text-align:left;font-weight:bold;padding:2px 3px;height:31px}.eclipses td{padding:0 3px;white-space:nowrap;line-height:13px}.eclipses.boldtext td{font-weight:bold}.eclipses .empty{padding:12px;color:#555}.pos{font-family:'Courier New',monospace}.zglyph{font-family:'Segoe UI Symbol','Arial Unicode MS',sans-serif}.usecolors .solar .pos{color:#0057ff}.usecolors .lunar .pos{color:#ff0000}.usecolors .lunar:nth-child(4n) .pos{color:#00aa00}.usecolors .solar:nth-child(4n) .pos{color:#00aa00}.sidepanel{padding-top:58px}.sidepanel label,.sidepanel select,.sidepanel button{display:block;width:100%;margin-bottom:6px}.sidepanel fieldset{border:2px solid #014712;background:#fff;margin:9px 0;padding:5px}.sidepanel fieldset label{margin:1px 0}.sidepanel button{height:23px;border:1px solid #014712;background:#fff;color:#014712;font-weight:bold}.sidepanel button:disabled{color:#777}.disabled{color:#777}.quit{color:red!important;font-weight:bold}@media print{body{background:white}.app{width:auto;height:auto;border:0;background:white}.titlebar,.topgrid,.sidepanel{display:none}.messagebox{border:0;height:auto}.mainrow{display:block;padding:0}.tablewrap{height:auto;overflow:visible;border:0}.eclipses th{position:static}}

/* Phase 2: HamburgSymbols/HamburgFonts glyph support and live progress meter */
@font-face{
  font-family:'HamburgSymbols';
  src:
/*    url("fonts/HamburgSymbols.ttf") format("truetype"),  */
/*    url("fonts/HamburgFonts.ttf") format("truetype"),  */
    url("HamburgSymbols.ttf") format("truetype"),
/*    url("HamburgFonts.ttf") format("truetype");  */
  font-weight:normal;
  font-style:normal;
}
.hamburg,.zglyph{
  font-family:'HamburgSymbols','Segoe UI Symbol','Arial Unicode MS',sans-serif;
  font-size:15px;
  font-weight:normal;
  display:inline-block;
  width:14px;
  text-align:center;
  line-height:12px;
  vertical-align:-1px;
}
.progressbox{
  height:42px;
  margin:2px 8px 4px;
  background:#fff;
  border:2px solid #014712;
  padding:3px 6px;
  display:grid;
  grid-template-columns:1fr 45px;
  grid-template-rows:14px 13px;
  column-gap:6px;
  align-items:center;
}
.progressLabel{font:12px 'Courier New',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1/3}
.progressOuter{height:14px;background:#fff;border:1px solid #014712;grid-column:1/2}
.progressInner{height:100%;background:linear-gradient(90deg,#014712,#BE9843);width:0%;transition:width .15s linear}
.progressPct{font:12px 'Courier New',monospace;text-align:right;grid-column:2/3}.searchbtn:disabled{color:#666}

/* Phase 3 Swiss lookup style polish */
.topgrid{background:#f7f7f2}.icon.hamburg{font-size:18px;color:#BE9843}.listbox{background:#fdfdfb;border:1px solid #014712}.eclipses tbody tr:nth-child(even){background:#f8faf7}.eclipses tbody tr:hover{background:#fff6df}.sidepanel select{border:1px solid #014712}.quit{background:#fff!important;color:#b00000!important}.searchbtn:hover,.sidepanel button:hover{filter:brightness(1.05)}

/* Phase 4: live chunk polling, disabled child options, and Sun/Moon kind glyphs */
.grayed{opacity:.48;color:#555!important}.grayed input{cursor:not-allowed}.bodyglyph{font-size:15px;width:15px;color:#014712;vertical-align:-1px}.usecolors .solar .bodyglyph{color:#BE9843}.usecolors .lunar .bodyglyph{color:#014712}.progressInner{transition:width .08s linear}.messagebox b{color:#014712}

/* Phase 5: location lookup pane matching the Swiss Ephemeris lookup workflow */
.topgrid{grid-template-columns:350px 300px 160px;grid-template-areas:"types aspects range" "location location location"}
.eclipse-types{grid-area:types}.aspects{grid-area:aspects}.searchrange{grid-area:range}.locationbox{grid-area:location;min-height:112px;background:#fffef8}
.lookuprow{display:grid;grid-template-columns:1fr 86px;gap:6px;margin-bottom:5px}.lookuprow input{width:100%;height:23px}.lookuprow button{height:23px;background:#014712;color:white;border:1px solid #BE9843;font-weight:bold}.locationbox select{width:100%;margin-bottom:6px;height:23px}.coordgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.coordgrid label{display:flex;align-items:center;gap:4px;color:#014712;font-weight:bold}.coordgrid input{width:100%;height:22px}.topocheck{display:block;margin-top:6px;color:#014712}.messagebox{height:82px}.tablewrap{height:292px}
@media(max-width:900px){.app{width:100%}.topgrid{grid-template-columns:1fr;grid-template-areas:"types" "aspects" "range" "location"}.coordgrid{grid-template-columns:1fr 1fr}.mainrow{grid-template-columns:1fr}.sidepanel{padding-top:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.sidepanel fieldset{grid-column:1/3}.sidepanel label,.sidepanel select,.sidepanel button{margin-bottom:0}}

/* Phase 6: Swiss Ephemeris generator style location pane + zodiac/house controls */
.topgrid{grid-template-columns:300px 290px 1fr;grid-template-areas:"types aspects range" "location location zodiac"}
.zodiacbox{grid-area:zodiac;min-height:112px;background:#fffef8}
.zodiacbox label{display:block;margin:10px 0 0 8px;font-size:14px;color:#111}
.lookup-pane label{display:block;color:#000;margin:3px 0 2px;font-size:12px}
.lookup-pane input[type=text],.lookup-pane input[type=number],.lookup-pane select{width:100%;height:31px;border:2px solid #BE9843;padding:3px 7px;font-size:13px;background:#fff}
.lookup-pane .lookuprow{display:grid;grid-template-columns:1fr 76px;gap:8px;margin-bottom:4px}
.lookup-pane .lookuprow button{height:31px;background:#014712;color:#fff;border:2px solid #BE9843;font-weight:bold}
.lookup-pane .hint{font-size:11px;line-height:13px;color:#333;margin-top:4px}
.locationbox{min-height:250px}.messagebox{height:91px}.tablewrap{height:278px}
@media(max-width:900px){.topgrid{grid-template-columns:1fr;grid-template-areas:"types" "aspects" "range" "location" "zodiac"}}
.lookup-status{
  min-height:18px;
  margin:3px 0 6px 0;
  font-size:12px;
  color:#014712;
  font-family:Consolas, 'Courier New', monospace;
}
.lookup-status.error{ color:#a00000; font-weight:bold; }


/* Phase 9: wider responsive layout, autosized criteria panel, selectable atlas results, and element colors */
.app{width:min(1280px,98vw);max-width:1280px;}
.topgrid{grid-template-columns:minmax(300px,380px) minmax(260px,330px) minmax(180px,1fr);}
.messagebox{height:auto;min-height:86px;max-height:none;overflow:visible;line-height:15px;}
.mainrow{grid-template-columns:minmax(0,1fr) 145px;}
.tablewrap{height:auto;min-height:320px;max-height:60vh;overflow-x:hidden;overflow-y:auto;}
.eclipses{table-layout:fixed;width:100%;font-size:11px;}
.eclipses th,.eclipses td{white-space:normal;overflow-wrap:anywhere;word-break:normal;padding:2px 3px;line-height:13px;}
.eclipses td.pos{white-space:nowrap;font-size:12px;}
.eclipses th:nth-child(1){width:56px}.eclipses th:nth-child(2){width:61px}.eclipses th:nth-child(3){width:82px}.eclipses th:nth-child(4){width:78px}.eclipses th:nth-child(5){width:68px}.eclipses th:nth-child(6){width:92px}.eclipses th:nth-child(7){width:54px}.eclipses th:nth-child(8){width:66px}.eclipses th:nth-child(9){width:63px}.eclipses th:nth-child(10){width:76px}.eclipses th:nth-child(11){width:67px}.eclipses th:nth-child(12){width:67px}.eclipses th:nth-child(13){width:67px}
#locationResults{display:none;margin-top:6px;max-height:245px;overflow:auto;padding-right:2px;}
.location-result-button{display:block;width:100%;text-align:left;margin:4px 0;background:#fff;color:#014712;border:1px solid #014712;padding:6px;font-size:12px;line-height:15px;cursor:pointer;}
.location-result-button:hover{background:#fff6df;border-color:#BE9843;}
.location-result-button span{font-size:11px;color:#014712;}
.zpos{font-weight:bold;}.z-fire{color:#d71920}.z-earth{color:#2e8b57}.z-air{color:#f2a900}.z-water{color:#3366cc}
.usecolors .solar .pos,.usecolors .lunar .pos{color:inherit!important;}
@media(max-width:900px){.app{width:100vw;border-left:0;border-right:0}.mainrow{grid-template-columns:1fr}.sidepanel{padding-top:4px}.tablewrap{max-height:none;overflow-x:hidden}.eclipses{font-size:10px}.hamburg,.zglyph{font-size:13px;width:11px}.eclipses th,.eclipses td{padding:2px 1px}}
@media(max-width:640px){.eclipses th:nth-child(9),.eclipses td:nth-child(9),.eclipses th:nth-child(11),.eclipses td:nth-child(11),.eclipses th:nth-child(12),.eclipses td:nth-child(12),.eclipses th:nth-child(13),.eclipses td:nth-child(13){display:none}.eclipses th:nth-child(1){width:45px}.eclipses th:nth-child(2){width:55px}.eclipses th:nth-child(3){width:68px}.eclipses th:nth-child(4){width:68px}.eclipses th:nth-child(5){width:58px}.eclipses th:nth-child(6){width:82px}}


/* Phase 10: closer Solar Fire layout, readable atlas results, sane responsive table scrolling */
.searchrange{min-height:74px;}
.searchrange .searchbtn{display:none;}
.sidepanel{padding-top:0;}
.side-searchbtn{display:block;width:100%;height:35px;margin:0 0 9px 0;color:#fff!important;background:#014712!important;border:2px solid #BE9843!important;font-weight:bold;font-size:14px;cursor:pointer;}
.side-searchbtn:hover{background:#BE9843!important;color:#014712!important;border-color:#014712!important;}

/* keep the little checkbox lists together on desktop and mobile */
.type-lists{gap:26px;align-items:flex-start;flex-wrap:wrap;}
.listbox{height:auto;min-height:62px;padding:2px 3px;overflow:visible;}
.listbox label{display:flex;align-items:center;gap:3px;height:17px;line-height:17px;white-space:nowrap;}
.listbox input[type=checkbox]{flex:0 0 auto;margin:0;}
.sarosbox{min-width:80px;white-space:nowrap;}

/* make the atlas result list look like the Swiss lookup list instead of overlapping lines */
#locationResults{max-height:255px;overflow-y:auto;overflow-x:hidden;border:1px solid #014712;background:#fff;padding:3px;}
.location-result-button{height:auto!important;min-height:52px;white-space:normal;line-height:1.25!important;padding:6px 8px!important;margin:3px 0!important;overflow:visible;}
.location-result-button b{display:block;font-size:12px;line-height:1.2;margin-bottom:2px;}
.location-result-button span{display:block;font-size:11px;line-height:1.2;}

/* desktop: try to fit; smaller screens: allow horizontal access instead of hiding columns */
.tablewrap{overflow-x:auto!important;overflow-y:auto!important;}
.eclipses{min-width:1045px;table-layout:fixed;}
@media (min-width:1180px){.eclipses{min-width:0;width:100%;}}
@media(max-width:900px){
  .tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  .eclipses{min-width:1045px;font-size:11px;}
  .eclipses th,.eclipses td{white-space:nowrap;padding:2px 3px;}
  .sidepanel{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .side-searchbtn{grid-column:1/3;margin-bottom:0;}
}
@media(max-width:640px){
  .eclipses th:nth-child(9),.eclipses td:nth-child(9),.eclipses th:nth-child(11),.eclipses td:nth-child(11),.eclipses th:nth-child(12),.eclipses td:nth-child(12),.eclipses th:nth-child(13),.eclipses td:nth-child(13){display:table-cell!important;}
}

/* Phase 14: user-controlled output columns */
.column-toggle-box{
  max-height:250px;
  overflow:auto;
}
.column-toggle-box label{
  display:flex!important;
  align-items:center;
  gap:4px;
  width:100%!important;
  margin:2px 0!important;
  line-height:16px;
}
.column-toggle-box input[type=checkbox]{
  flex:0 0 auto;
}
.coltoggle-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-bottom:5px;
}
.coltoggle-actions button{
  height:22px!important;
  margin:0!important;
  padding:0 3px;
  font-size:11px;
}
.eclipses th[style*="display: none"],
.eclipses td[style*="display: none"]{
  display:none!important;
}
@media(max-width:900px){
  .column-toggle-box{grid-column:1/3;max-height:190px;}
}

/* Phase 15: polish column controls, instant style/sort, draggable/filterable table */
.coltoggle-actions button{
  min-height:26px!important;
  height:auto!important;
  line-height:11px!important;
  white-space:normal!important;
  overflow:hidden;
  text-align:center;
  padding:1px 2px!important;
  font-size:10px!important;
}
.tabletools{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 0 4px;
  font:12px Arial,Helvetica,sans-serif;
}
.tabletools label{
  display:flex;
  align-items:center;
  gap:6px;
  color:#014712;
  font-weight:bold;
  margin:0;
}
#tableFilter{
  width:min(340px,55vw);
  height:22px;
  border:1px solid #014712;
}
.dragHint{
  color:#014712;
  opacity:.75;
  font-size:11px;
}
.eclipses th[data-col]{cursor:grab;user-select:none;}
.eclipses th.dragging-col{opacity:.55;outline:2px solid #014712;}
@media(max-width:900px){
  .tabletools{display:block;}
  .tabletools label{margin-bottom:4px;}
  #tableFilter{width:100%;}
  .dragHint{display:block;}
}


/* Phase 16: desktop output layout, true color toggle, resizable columns, smart wrapping, drag-scroll */
.mainrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 145px;
  grid-template-rows:auto minmax(320px,60vh);
  gap:6px 8px;
  align-items:start;
}
.tabletools{grid-column:1;grid-row:1;min-width:0;}
.tablewrap{grid-column:1;grid-row:2;width:100%;min-width:0;}
.sidepanel{grid-column:2;grid-row:1 / span 2;align-self:start;}

/* When colors are off, remove all per-row/glyph/zodiac coloring inside the output table. */
.eclipses:not(.usecolors) td,
.eclipses:not(.usecolors) .pos,
.eclipses:not(.usecolors) .zpos,
.eclipses:not(.usecolors) .zglyph,
.eclipses:not(.usecolors) .bodyglyph,
.eclipses:not(.usecolors) .hamburg{
  color:#111!important;
}
.eclipses:not(.usecolors) .rx{color:#111!important;}

/* Allow text to intelligently wrap when a column is narrowed. */
.eclipses th,
.eclipses td{
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  vertical-align:top;
}
.eclipses td.pos{white-space:normal!important;}
.eclipses th[data-col]{position:sticky;top:0;}
.eclipses th .resize-handle{
  position:absolute;
  top:0;
  right:-3px;
  width:7px;
  height:100%;
  cursor:col-resize;
  z-index:5;
  user-select:none;
  touch-action:none;
}
.eclipses th .resize-handle:hover{background:rgba(1,71,18,.18);}
.eclipses th.resizing{cursor:col-resize!important;outline:2px solid #014712;}
.tablewrap.drag-scroll-ready{cursor:grab;user-select:none;}
.tablewrap.drag-scrolling{cursor:grabbing;}
.tablewrap.drag-scrolling *{user-select:none!important;}

@media(max-width:900px){
  .mainrow{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .tabletools{grid-column:1;grid-row:1;}
  .tablewrap{grid-column:1;grid-row:2;}
  .sidepanel{grid-column:1;grid-row:3;}
}


/* Phase 17: tighter output spacing, fresh layout per reload, and larger styled table */
.mainrow{
  grid-template-columns:minmax(0,1fr) 160px!important;
  grid-template-rows:auto auto!important;
  gap:4px 10px!important;
  align-items:start!important;
}
.tabletools{
  margin:0!important;
  padding:0 0 3px 0!important;
}
.tablewrap{
  margin-top:0!important;
  min-height:220px!important;
  height:auto!important;
  max-height:62vh!important;
  overflow:auto!important;
  align-self:start!important;
}
.eclipses{
  font-size:13px!important;
  line-height:1.2!important;
}
.eclipses th{
  background:#014712!important;
  color:#BE9843!important;
  text-align:center!important;
  vertical-align:middle!important;
  font-weight:bold!important;
  font-size:13px!important;
  line-height:1.05!important;
  padding:6px 5px!important;
  border:2px solid #BE9843!important;
}
.eclipses td{
  font-size:13px!important;
  line-height:1.2!important;
  padding:3px 5px!important;
  vertical-align:middle!important;
}
.eclipses .empty{
  padding:12px!important;
  text-align:left!important;
}
.tabletools label,
.dragHint{
  font-size:12px!important;
}
#tableFilter{
  font-size:12px!important;
}
.coltoggle-actions button{
  font-size:10px!important;
  line-height:10px!important;
  padding:2px 1px!important;
}
@media(max-width:900px){
  .mainrow{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;}
  .tablewrap{max-height:none!important;min-height:220px!important;}
  .eclipses{font-size:12px!important;}
  .eclipses th,.eclipses td{font-size:12px!important;}
}

/* Phase 18: final desktop gap fix - keep filter and table in the same left-column flow */
.mainrow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 176px!important;
  grid-template-rows:auto!important;
  gap:8px!important;
  align-items:start!important;
}
.outputarea{
  grid-column:1!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  min-width:0!important;
}
.sidepanel{
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  padding-top:0!important;
}
.tabletools{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  min-height:24px!important;
}
.tablewrap{
  margin:0!important;
  min-height:220px!important;
  height:auto!important;
  max-height:62vh!important;
  overflow:auto!important;
}
@media(max-width:900px){
  .mainrow{grid-template-columns:1fr!important;grid-template-rows:auto auto!important;}
  .outputarea{grid-column:1!important;grid-row:1!important;}
  .sidepanel{grid-column:1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important;}
  .sidepanel fieldset{grid-column:1 / -1!important;}
  .tabletools{display:block!important;}
  #tableFilter{width:100%!important;}
  .tablewrap{max-height:none!important;}
}


/* Phase 22 small fixes */
#locationResults {
  display: none;
  width: 100%;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 2px solid #014712;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}
#locationResults .location-result-button,
.location-result-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 5px 0;
  padding: 8px 10px;
  text-align: left;
  line-height: 1.25;
  white-space: normal;
  background: #fff;
  color: #014712;
  border: 1px solid #BE9843;
}
#locationResults .location-result-button span { color:#333; font-size:12px; }
#locationResults .location-result-button:hover { background:#014712; color:#BE9843; }
#locationResults .location-result-button:hover span { color:#fff; }
.eclipses th {
  background:#014712 !important;
  color:#BE9843 !important;
  border:2px solid #BE9843 !important;
  text-align:center !important;
}