/* Planet view: column with picture and tabs on the left, panel of the selected page on the right. */

.planet-view { position: absolute; inset: 0; display: flex; gap: 24px; padding: 24px; }
.planet-column { flex: none; width: 220px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.planet-title { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.planet-title h1 { font-size: 1.71rem; }
.planet-title p { color: var(--text-soft); }
.planet-title .colony-tag { margin: 6px 0 0; }
.planet-tabs { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.planet-tabs .button { justify-content: center; }
.planet-tabs .symbol { width: 16px; height: 16px; }
.planet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.planet-panel { flex: 1; min-height: 0; overflow: auto; }

.panel-content { display: flex; flex-direction: column; gap: 22px; padding: 22px 26px 26px; max-width: 1100px; }
.panel-content h2 { font-size: 1.43rem; margin-top: 2px; }
.panel-text { max-width: 75ch; color: var(--surface-soft); }
.panel-section { display: flex; flex-direction: column; gap: 10px; }

.yield { font-weight: 600; }
.yield[data-empty="true"] { color: var(--minus); }

.queue { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.queue small { margin-left: 8px; color: var(--surface-soft); }
.queue .button { margin-left: 8px; padding: 2px 10px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .button { padding: 2px 10px; }
.sectors .sector-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sectors .sector-actions .button { padding: 2px 10px; }

.build-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.build-option {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 12px; padding: 12px 14px;
  background: var(--surface-deep); border-radius: calc(var(--radius) * 0.66);
}
.build-option p { font-size: var(--text-sm); color: var(--surface-soft); }
.build-data { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font: 500 var(--text-xs) var(--font-mono); }
.build-reason { grid-column: 1 / -1; color: var(--surface-faint); }

/* The picture leads to the overview and shines while it is open. */
.planet-avatar { display: block; border-radius: 50%; transition: transform 0.2s, filter 0.2s; }
@media (hover: hover) { .planet-avatar:hover { transform: scale(1.04); } }
.planet-avatar[aria-current="page"] { filter: drop-shadow(0 0 14px var(--vector-light)); }
.planet-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Overview: the ground view of the planet with its settlement, below it one plaque per page, coloured by its condition. */
.planet-overview { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.ground-scene { display: block; width: 100%; height: clamp(260px, 58vh, 560px); border-radius: var(--radius); background: var(--surface-deep); }
/* People and buildings are silhouettes in the ink of the scene; the shapes behind <use> are coloured in the template. */
.ground-scene .scene-thing, .ground-scene .scene-town { color: var(--scene-ink); fill: var(--scene-ink); }
.ground-scene .lit { fill: var(--scene-light); }
.ground-scene .glow { fill: url(#scene-glow); }
.ground-scene .scene-logs { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.ground-scene .scene-river { fill: none; stroke-width: 9; stroke-linecap: round; opacity: 0.85; }
.ground-scene .scene-moon circle { fill: #fff; fill-opacity: 0.1; stroke: #fff; stroke-opacity: 0.35; stroke-width: 1; }
.ground-scene .scene-moon path { fill: #f6f3e8; opacity: 0.9; }
.ground-scene .scene-fog { pointer-events: none; }
.ground-scene .scene-shine { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.ground-scene .scene-smoke { fill: currentColor; opacity: 0; animation: scene-smoke 5s ease-out infinite; }
.ground-scene .scene-smoke.late { animation-delay: 2.5s; }
.ground-scene .scene-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: scene-flame 0.9s ease-in-out infinite alternate; }
.ground-scene .scene-stars .twinkle { animation: scene-twinkle 3s ease-in-out infinite alternate; }
@keyframes scene-twinkle { 100% { opacity: 0.3; } }
.ground-scene .scene-clouds { animation: scene-drift 90s ease-in-out infinite alternate; }
@keyframes scene-smoke { 0% { opacity: 0.35; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes scene-flame { 0% { transform: scale(1, 1); } 100% { transform: scale(0.85, 1.15); } }
@keyframes scene-drift { 100% { transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .ground-scene * { animation: none !important; } }

.plaques { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.plaque {
  --state: var(--idle);
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px 14px;
  color: inherit; text-decoration: none; background: var(--surface-deep); border: var(--surface-border); border-radius: var(--radius);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.plaque[data-state="good"] { --state: var(--plus); }
.plaque[data-state="strained"] { --state: var(--caution); }
.plaque[data-state="critical"] { --state: var(--minus); }
@media (hover: hover) { .plaque:hover { transform: translateY(-2px); border-color: var(--button-hover-border); box-shadow: var(--shadow); } }
.plaque:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plaque .symbol { width: 20px; height: 20px; color: var(--state); }
.plaque-name { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--title-spacing); text-transform: var(--title-case); color: var(--surface-soft); }
.plaque-value { grid-column: 1 / -1; font: 600 1.57rem var(--font-mono); }
.plaque[data-state="idle"] .plaque-value { color: var(--surface-faint); }
/* Share of the main figure as a line along the bottom edge */
.plaque-bar { position: absolute; inset: auto 0 0; height: 3px; background: var(--divider-soft); }
.plaque-bar span { display: block; height: 100%; background: var(--state); box-shadow: 0 0 6px var(--state); transition: width 0.6s; }
.state-light { width: 7px; height: 7px; border-radius: 50%; background: var(--state); box-shadow: 0 0 8px var(--state); }
.plaque[data-state="critical"] .state-light { animation: state-pulse 1.6s ease-in-out infinite; }
@keyframes state-pulse { 50% { opacity: 0.35; } }

@media (max-width: 759px) {
  .planet-view { flex-direction: column; padding: 16px; overflow: auto; }
  .planet-column { width: 100%; flex-direction: row; text-align: left; }
  .planet-title { align-items: flex-start; }
  .planet-tabs { width: auto; margin-left: auto; }
  .planet-panel { flex: none; overflow: visible; }
  .panel-content { padding: 16px; }
  /* Wide tables scroll within their section instead of widening the page. */
  .panel-section { overflow-x: auto; }
}

/* Science */
.research-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: var(--text-sm); color: var(--surface-soft); }
.research-filters label { display: inline-flex; align-items: center; gap: 6px; }
.share-input { width: 76px; padding: 3px 6px; font: inherit; color: var(--surface-text); background: var(--surface); border: var(--button-border); border-radius: var(--radius-button); text-align: right; }
.research-browser { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 16px; align-items: start; }
.research-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.research-entry { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; text-align: left; border: 1px solid var(--divider-soft); border-radius: 8px; background: transparent; }
@media (hover: hover) { .research-entry:hover { border-color: var(--accent); } }
.research-entry[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.research-entry small { color: var(--surface-soft); }
.research-entry[data-state="completed"] strong { color: var(--plus); }
.research-entry[data-state="locked"] { opacity: 0.7; }
.research-detail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.research-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: var(--text-sm); }
.research-facts dt { color: var(--surface-faint); }
.research-facts dd { margin: 0; }
.research-meter { display: inline-block; width: 70px; margin-right: 8px; vertical-align: middle; }
.research-meter span { background: var(--accent); }
.link-button { padding: 0; border: none; background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--divider-soft); }
@media (hover: hover) { .link-button:hover { color: var(--accent); } }
@media (max-width: 760px) { .research-browser { grid-template-columns: 1fr; } }
.search-input { width: 180px; padding: 3px 8px; font: inherit; color: var(--surface-text); background: var(--surface); border: var(--button-border); border-radius: var(--radius-button); }
.research-graph { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; padding-top: 6px; border-top: 1px solid var(--divider-soft); }
.graph-column { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.graph-centre { align-self: center; }
.graph-group { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px dashed var(--divider-soft); border-radius: 8px; }
.graph-group small { color: var(--surface-faint); }
.graph-node { padding: 5px 9px; text-align: left; font-size: var(--text-sm); border: 1px solid var(--divider); border-radius: 6px; background: transparent; }
@media (hover: hover) { button.graph-node:hover { border-color: var(--accent); } }
.graph-node[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.graph-node[data-done="true"] { color: var(--plus); }
.graph-unknown { font-style: italic; color: var(--surface-faint); }
@media (max-width: 760px) { .research-graph { grid-template-columns: 1fr; } }