/* Responsive site header */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body > .site-header {
  --header-gutter: clamp(.75rem, 2.5vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .45rem .75rem;
  padding-block: .55rem;
  padding-inline: max(var(--header-gutter), env(safe-area-inset-left)) max(var(--header-gutter), env(safe-area-inset-right));
}
.site-header .brand > span {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.site-header .brand { overflow-wrap: anywhere; }
.site-header .brand-home {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .35rem;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.15;
}
.yieldworks-mouse {
  display: block;
  flex: none;
  inline-size: clamp(1.9rem, 4vw, 2.5rem);
  block-size: auto;
}
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(5rem, 13vw, 10rem);
  gap: 0 .75rem;
}
.site-footer > .footer-meta { grid-area: 1 / 1 / 2 / -1; }
.site-footer > .footer-accessibility { grid-area: 2 / 1 / 3 / -1; }
.site-footer > .footer-affiliation { grid-area: 3 / 1 / 4 / -1; }
.site-footer > #contact-open { grid-area: 4 / 1; justify-self: start; }
.footer-mouse-corner { grid-area: 4 / 2; position: relative; }
.footer-mouse-corner > .yieldworks-mouse {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: right bottom;
}
@media (min-width: 80rem) {
  .site-footer > :is(.footer-accessibility, .footer-affiliation) { grid-column-end: 2; }
  .footer-mouse-corner { grid-row: 2 / 5; }
}
.site-header .brand small {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .015em;
}
.site-header .brand-tagline {
  color: var(--text);
  font-weight: 750;
}

.site-header .affiliation-help { display: inline; }
.site-header .affiliation-reference {
  display: inline;
  vertical-align: baseline;
}
.site-header .header-account-controls {
  position: relative;
  justify-self: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .35rem;
  min-width: 0;
  margin: 0;
}
.site-header .account-menu { position: static; margin: 0; }
.site-header .header-game-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 2.75rem;
  padding: .35rem .55rem;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--gold);
  font-size: .8125rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-header .header-game-link:hover { background: var(--control-hover); border-color: var(--gold); }
.site-header .account-menu > summary {
  padding: .4rem .65rem;
  white-space: nowrap;
}
.site-header .account-menu-content {
  inset-block-start: calc(100% + .25rem);
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: min(22rem, 100%);
  max-height: min(75dvh, 30rem);
  overflow-y: auto;
}
.header-overview {
  grid-column: 1 / -1;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem .75rem;
  min-width: 0;
  padding-block-start: .45rem;
  border-block-start: 1px solid var(--table-line);
}
.site-header :is(.header-live-summary, .header-tools) {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
  order: 0;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.site-header :is(.header-live-reading[data-tab], .header-coriolis, .header-data) {
  min-width: 0;
  margin: 0;
  padding: .25rem .4rem;
  border-inline-start: 2px solid var(--line);
  text-align: start;
  overflow-wrap: anywhere;
}
.site-header .header-live-reading[data-tab] {
  align-content: center;
  justify-items: start;
  min-height: 2.75rem;
  border-width: 0;
  border-inline-start-width: 2px;
  border-radius: 0 .25rem .25rem 0;
  background: transparent;
  font-weight: 400;
  line-height: 1.25;
}
.site-header .header-live-reading[data-tab]:is(:hover, .active) { background: var(--control-hover); }
.site-header .header-coriolis {
  display: grid;
  justify-items: start;
  align-content: center;
}
.site-header .header-coriolis select {
  width: auto;
  max-width: 100%;
  min-height: 2rem;
  margin: 0;
  padding: .15rem 1.4rem .15rem .4rem;
  font-size: .875rem;
  text-align: start;
  text-align-last: start;
  background-position: right .45rem center;
  background-size: .7rem auto;
}
.site-header .header-storm {
  gap: .05rem;
  min-width: 0;
  max-width: 100%;
  padding-block: .1rem;
  justify-items: start;
  align-items: flex-start;
  text-align: start;
  line-height: 1.3;
}
.site-header :is(.header-storm span, .header-data .version, .data-check-date) {
  font-size: .8125rem;
  letter-spacing: 0;
}
.site-header .header-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  line-height: 1.35;
}
@media (min-width: 38rem) {
  .header-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-header .header-tools { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .site-header .header-live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.header-specialization {
  display: grid;
  grid-column: 1 / -1;
  justify-items: center;
  gap: .3rem;
  min-width: 0;
}
.header-specialization-actions, .header-specialization-levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .3rem .55rem;
  min-width: 0;
  max-width: 100%;
}
.header-specialization-link {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .25rem .75rem;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  text-align: start;
  color: var(--gold);
  background: var(--control-bg);
  font-weight: 700;
}
.header-specialization-link:is(:hover, .active) {
  border-color: var(--gold);
  background: var(--control-hover);
}
.header-level { display: grid; justify-items: center; gap: .1rem; min-width: 0; }
.header-level label { margin: 0; font-size: .75rem; color: var(--muted); }
.header-level .header-specialization-field {
  grid-template-columns: 1.6rem 2.25rem 1.6rem;
  gap: .12rem;
  margin: 0;
}
.header-level .header-specialization-field :is(button, input) {
  min-height: 1.75rem;
  padding: 0;
  font-size: .875rem;
}
.specialization-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
}
.specialization-level { margin-block: .5rem; }
.specialization-editor {
  display: inline-grid;
  grid-template-columns: 2.75rem minmax(3rem, 4rem) 2.75rem;
  gap: .3rem;
  margin-block-start: .35rem;
}
.specialization-editor button { min-height: 2.75rem; padding: .25rem; }
.specialization-editor input { width: 100%; min-width: 0; margin: 0; text-align: center; }
.specialization-level > .hint { margin: .3rem 0 0; }
.specialization-details .panel { min-width: 0; }
.specialization-details .panel > button { margin-block-start: .65rem; }
.specialization-details .metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
#gather-tool-matches { grid-column: 1 / -1; min-width: 0; }
#gather-tool-matches p { margin: 0 0 .25rem; }
#gather-tool-matches ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
#gather-tool-matches button { min-height: 2.75rem; padding: .3rem .55rem; text-align: start; }
@media (min-width: 64rem) {
  .header-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .header-specialization { grid-column: auto; }
}
@media (min-width: 46rem) {
  .site-header .brand > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .65rem;
  }
}
@media (max-width: 37.999rem) {
  .site-header .account-sync-label { display: none; }
}
@media (max-width: 47.999rem) {
  .site-header .header-specialization-link {
    min-height: 2.25rem;
    padding-inline: .5rem;
    font-size: .875rem;
  }
  .site-header .header-storm { min-height: 2.25rem; }
  .site-header .header-coriolis select,
  .site-header .header-level .header-specialization-field input { font-size: 1rem; }
}
@media (min-width: 48rem) {
  body > .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header .header-account-controls { justify-self: end; justify-content: flex-end; }
  .site-header .account-menu { position: relative; }
  .site-header .account-menu-content {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(22rem, calc(100vw - 2 * var(--header-gutter)));
  }
}

.live-tracker-column {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-self: stretch;
  min-inline-size: 0;
}
.live-tracker-column > label {
  grid-row: 1;
  max-inline-size: 18rem;
  margin: 0;
}
.live-tracker-column > .live-tracker {
  grid-row: 2;
}

.mobile-plan-summary { display: none; }
.refinery-compatible-actions { gap: .3rem; margin-block: .25rem .55rem; }
.refinery-compatible-actions button { padding: .25rem .55rem; font-size: .875rem; }
.refinery-compatible-actions button[aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
}
#gather-compare {
  display: grid;
  gap: .35rem .65rem;
  margin-block-start: .5rem;
}
#gather-compare label { margin: 0; min-width: 0; }
#site-backup-preview { font-size: .875rem; overflow-wrap: anywhere; margin-block: .35rem; }
@media (min-width: 34rem) {
  #gather-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .tab-panel > .mobile-plan-summary {
    display: flex;
    align-items: center;
    position: sticky;
    top: 3.25rem;
    z-index: 6;
    min-height: 2.75rem;
    padding: .35rem .65rem;
    margin-block-end: .55rem;
    background: var(--panel);
    border: 1px solid var(--control-border);
    border-radius: 4px;
    overflow-wrap: anywhere;
  }
}

/* Contextual help */
.heading-with-help,
.field-with-help {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.field-with-help > :is(label, .number-entry) {
  flex: 1 1 auto;
  min-width: 0;
}
.context-help {
  display: inline-flex;
  flex: 0 0 auto;
}
.context-help .help-button {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: .12rem;
  border-radius: 50%;
  color: var(--gold);
  font-size: .875rem;
}
.help-bubble {
  position: fixed;
  z-index: 50;
  width: min(19rem, calc(100vw - 24px));
  padding: .65rem .75rem;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 .4rem 1rem rgb(0 0 0 / 25%);
  font-size: .875rem;
  line-height: 1.5;
}

.guide-index {
  display: grid;
  gap: .2rem;
}
.guide-index a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .5rem;
}
.guide-step h3 {
  scroll-margin-block-start: 4rem;
}
.guide-step li + li {
  margin-block-start: .45rem;
}
#preset-form {
  margin-block-start: .8rem;
}
#preset-form label {
  margin-bottom: .5rem;
}
#preset-status:empty,
#gather-handoff:empty {
  display: none;
}
#copy-run,
.shortage-action {
  min-height: 2.75rem;
}


.gather-materials table {
  min-width: 0;
  table-layout: fixed;
}
.gather-materials th:first-child {
  width: 44%;
}
.gather-materials th,
.gather-materials td {
  padding: .35rem .3rem;
  overflow-wrap: anywhere;
}
.gather-materials input {
  margin: 0;
  min-width: 0;
  padding: .35rem;
}
h1, h2, h3, h4, h5, h6, th,
summary, .tool-group > p, .tool-group > [data-tab], .tool-group > .nav-link,
.guide-index a, .header-storm span {
  text-transform: capitalize;
}

#import-plan {
  margin-block-start: .75rem;
}
#import-plan button {
  min-height: 2.75rem;
}
#import-plan-status:empty {
  display: none;
}

.account-backup {
  display: grid;
  gap: .5rem;
  margin-block-start: .75rem;
}
.account-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.account-backup-actions > button {
  flex: 1 1 auto;
}
.account-backup button {
  min-height: 2.75rem;
}
#site-backup-status, #restore-data-status {
  margin: 0;
}
#site-backup-status:empty, #restore-data-status:empty {
  display: none;
}

/* Home */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.05rem, 3vw, 2.4rem);
  margin-block: .2rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(110deg, var(--control-bg), var(--panel) 74%);
}
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 105% 125%, transparent 0 1rem, var(--gold) 1.02rem 1.08rem, transparent 1.1rem 2rem);
  mask-image: linear-gradient(90deg, transparent 42%, black);
  opacity: .18;
}
.home-hero h2 {
  font-size: clamp(1.9rem, 5vw, 3.8rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
}
.home-hero p {
  max-width: 37ch;
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}
.home-group {
  margin-block: 1.1rem;
}
.home-group h3 {
  font-size: 1.05rem;
  margin-block: 0 .45rem;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: .55rem;
}
.home-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: .35rem .75rem;
  width: 100%;
  min-height: 5.4rem;
  padding: .7rem .85rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: start;
  text-decoration: none;
  white-space: normal;
}
.home-tool:hover {
  background: var(--control-hover);
  color: var(--text);
  border-color: var(--gold);
}
.home-tool-title {
  font-size: 1.04rem;
  font-weight: 700;
}
.home-tool-arrow {
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1.2;
}
.home-tool-description {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
}
@media (min-width: 64rem) {
  .home-group-2 .home-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-group-2 .home-tool { grid-column: span 2; }
  .home-group-2 .home-tool:nth-last-child(-n+2) { grid-column: span 3; }
}
[data-display-mode="contrast"] .home-hero {
  background: var(--panel);
}
[data-display-mode="contrast"] .home-hero::after {
  display: none;
}

.home-hero .home-platforms {
  margin: 0 0 .45rem;
  color: var(--gold);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .065em;
}
#refinery-plan-overview {
  scroll-margin-block-start: 4rem;
}
.refinery-summary-card {
  border-block-start: .2rem solid var(--gold);
}
.refinery-summary-card > .metrics { margin: .5rem 0 .15rem; }
.refinery-summary-card .result-head { margin-block-end: .35rem; }
.refinery-summary-card > .notice:last-child { margin-block-end: 0; }
.refinery-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .55rem;
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.refinery-card {
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: var(--metric-bg);
  overflow-wrap: anywhere;
}
.refinery-card h4 { margin: 0; }
.refinery-card > ul { margin: .25rem 0 .45rem; padding-inline-start: 1.15rem; }
.refinery-facts { display: grid; gap: .2rem; margin: .35rem 0 0; }
.refinery-facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 .55rem;
}
.refinery-facts dt { color: var(--muted); font-size: .875rem; }
.refinery-facts dd { margin: 0; font-weight: 650; color: var(--gold); }
.refinery-run-card { display: grid; align-content: space-between; gap: .4rem; }
.refinery-run-card > button { justify-self: start; }
.refinery-run-card > div > span {
  display: block;
  margin-block-start: .18rem;
  color: var(--muted);
  font-size: .875rem;
}

#live .live-tracker {
  padding: clamp(.8rem, 1.6vw, 1.05rem);
}
.live-tracker h3,
.live-tracker h4 {
  margin: 0;
}
.live-tracker h3 {
  font-size: 1.25rem;
  line-height: 1.2;
}
.live-tracker h4 {
  font-size: 1rem;
}
.live-tracker .tracker-reading-block {
  margin-block: .5rem;
}
.tracker-reading-block > span,
.tracker-facts dt {
  color: var(--muted);
  font-size: .875rem;
}
.live-tracker .tracker-reading-block > .tracker-value {
  display: block;
  margin: 0;
  color: var(--gold);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.water-reading-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.live-tracker .water-reading-row .tracker-value {
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  overflow-wrap: anywhere;
}
.live-tracker :is(.tracker-detail-section, .tracker-card-footer) {
  margin-block-start: .65rem;
  padding-block-start: .6rem;
  border-block-start: 1px solid var(--table-line);
}
.live-tracker .tracker-detail-section button,
.live-tracker .tracker-card-footer button {
  min-height: 2.75rem;
}
.tracker-groups,
.tracker-groups ul {
  list-style: none;
  padding: 0;
}
.tracker-groups .list-category > strong {
  color: var(--muted);
  font-size: .875rem;
}
.tracker-groups ul > li {
  margin-block: .4rem;
  padding: .55rem .65rem;
  border: 1px solid var(--table-line);
  border-radius: 5px;
}
.tracker-group-status {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .875rem;
}
.tracker-groups:empty,
.tracker-groups:not(:empty) + .tracker-no-groups,
.live-tracker .widget-result:empty {
  display: none;
}
.tracker-facts {
  display: grid;
  gap: .65rem;
  margin-block: .8rem;
}
.tracker-facts dd {
  margin: 0;
  font-weight: 650;
}

.equipment-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: .4rem .65rem;
  padding-block: .55rem;
  border-block-start: 1px solid var(--table-line);
}
.equipment-row .equipment-title {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
.equipment-title small {
  display: block;
  color: var(--muted);
}
.equipment-thumbnail {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: .1rem;
}
.equipment-art {
  display: block;
  width: 2.4rem;
  aspect-ratio: 1;
  border-radius: .15rem;
  background: var(--input-bg) url("equipment-thumbnails.webp") no-repeat var(--tile-x) var(--tile-y) / 400% 400%;
}
.equipment-cost-title {
  display: block;
  margin-block-end: .3rem;
  color: var(--gold);
}
.equipment-cost-item {
  display: flex;
  justify-content: space-between;
  gap: .55rem;
}
.equipment-stepper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: .4rem;
}
.equipment-stepper button {
  padding: .1rem;
  font-size: 1.2rem;
  min-height: 2.75rem;
}
.equipment-stepper input {
  min-height: 2.75rem;
  text-align: center;
}
.build-shopping-line {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  min-height: 2.75rem;
  cursor: pointer;
  color: inherit;
}
.number-entry {
  display: grid;
  gap: .3rem;
  min-width: 0;
}
.number-entry > label { margin: 0; }
.number-stepper {
  --number-step-width: 1.75rem;
  display: grid;
  grid-template-columns: var(--number-step-width) minmax(0, 1fr) var(--number-step-width);
  gap: .125rem;
  width: 100%;
  min-width: 0;
}
.number-stepper > input[data-number] {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-inline: .35rem;
}
.number-stepper > .number-step-button {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}
.number-stepper > .number-step-button:disabled { cursor: default; opacity: .65; }
.number-entry > .field-error,
.number-stepper + .field-error { margin: .15rem 0 0; }
.number-stepper:has(> .build-collected-quantity) {
  --number-step-width: 1.5rem;
  width: min(100%, 9rem);
  min-width: 5.25rem;
}
.number-stepper > input.build-collected-quantity { padding-inline: .25rem; }

.build-shopping-line input {
  width: 1.1rem;
  min-height: 1.1rem;
  flex: 0 0 auto;
}
:is(#build-results, #base-consumables) tr:has([data-shopping-item]:checked) {
  background: var(--metric-bg);
  color: #bbb6ae;
}
[data-display-mode="contrast"] :is(#build-results, #base-consumables) tr:has([data-shopping-item]:checked) {
  color: #475569;
}
:is(#build-results, #base-consumables) tr:has([data-shopping-item]:checked) > td {
  color: inherit;
}
.build-shopping-line:has(input:checked) > span {
  color: inherit;
  text-decoration: line-through;
}

.live-water-option { border-inline-start: 3px solid var(--gold); }
#base-consumables table { min-width: 0; table-layout: fixed; }
#base-consumables :is(th, td) {
  padding: .3rem .35rem;
  overflow-wrap: anywhere;
  vertical-align: middle;
}
#base-consumables thead th { letter-spacing: 0; }
#base-consumables thead th:nth-child(3) { width: 19%; }
#base-consumables thead th:nth-child(4) { width: 23%; }
@media (max-width: 48rem) {
  #base-consumables thead th:nth-child(4) { width: 6rem; }
}
#base-consumables .build-shopping-line { gap: .3rem; }
.consumable-loads {
  margin: 0;
  padding-inline-start: .65rem;
}

#selected-equipment:not(:empty) {
  margin-block: .3rem;
}
.equipment-stepper .field-error {
  grid-column: 1 / -1;
  grid-row: 2;
}

.account-backup-help {
  margin: 0;
}

/* Preserve result space when the planner has room for a sidebar. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .tool-layout {
    grid-template-columns: minmax(13.5rem, 29%) minmax(0, 1fr);
  }
}

/* Refinery crafting controls */
#refinery > .tool-layout {
  grid-template-areas: "crafting" "sidebar" "editor" "results";
}
#refinery > .tool-layout > .tool-sidebar { grid-area: sidebar; }
#refinery .refinery-editor-column { grid-area: editor; min-width: 0; }
#refinery .refinery-data-column { grid-area: results; min-width: 0; }
#refinery .refinery-editor-column:has(> [hidden]) { display: none; }
@media (min-width: 48rem) {
  #refinery > .tool-layout {
    grid-template-areas: "sidebar crafting" "sidebar editor" "sidebar results";
    grid-template-rows: auto auto 1fr;
  }
}
@media (min-width: 80rem) {
  #refinery > .tool-layout {
    grid-template-columns: minmax(11rem, .78fr) repeat(2, minmax(0, 1.425fr));
    grid-template-areas: "sidebar crafting crafting" "sidebar editor results";
    grid-template-rows: auto 1fr;
  }
  #refinery > .tool-layout:has(#refinery-run-editor[hidden]) {
    grid-template-areas: "sidebar crafting crafting" "sidebar results results";
  }
}
.refinery-output-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .18rem .45rem;
  min-width: 0;
}
.refinery-output-yield {
  color: var(--gold);
  font-size: .8rem;
  font-weight: 650;
  white-space: nowrap;
}
.refinery-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .55rem;
  margin-block: .55rem;
}
.refinery-overview-grid:empty { display: none; }
.tool-output .refinery-overview-grid > .panel { margin: 0; background: var(--metric-bg); }
.refinery-overview-runs > h3 { margin: .65rem 0 .45rem; }
.refinery-overview-run h4,
.refinery-overview-run h5 { margin: 0; }
.refinery-overview-run > .hint { margin: .2rem 0 .45rem; }
.refinery-overview-run > .refinery-queues { margin-block-end: 0; }
#refinery .refinery-data-column .metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
}
#refinery .refinery-data-column .metric { padding: .5rem; }
#refinery .refinery-data-column .metric strong { font-size: clamp(1rem, 1.45vw, 1.35rem); }
#refinery #refine-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.refinery-ingredient-card {
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--metric-bg);
}
.refinery-ingredient-card .number-entry {
  grid-template-columns: minmax(0, 1fr) minmax(5.25rem, 8rem);
  align-items: center;
  column-gap: .55rem;
}
.refinery-ingredient-card .number-entry > label { border: 0; padding: 0; }
.refinery-ingredient-card .number-stepper { --number-step-width: 1.5rem; }
.refinery-ingredient-card label small { display: block; }
.refinery-ingredient-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem .5rem;
  margin-block-start: .25rem;
  color: var(--muted);
  font-size: .875rem;
}
.refinery-data-column .refinery-facts > div { padding-block: .25rem; border-bottom: 1px solid var(--table-line); }
.refinery-data-column .refinery-facts > div:last-child { border-bottom: 0; }
.refinery-ingredient-raw {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
.refinery-facts > .refinery-fact-with-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem .5rem;
}
.refinery-facts .refinery-raw-detail {
  grid-column: 1 / -1;
  text-align: start;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.refinery-top-settings {
  grid-area: crafting;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  min-width: 0;
}
.refinery-option.panel { min-width: 0; margin: 0; padding: .4rem .6rem; }
.refinery-option .toggle, .decree-toggle {
  align-items: flex-start;
  gap: .4rem;
  min-height: 2rem;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.3;
}
.refinery-option .toggle { font-weight: 650; }
.refinery-option .toggle span { min-width: 0; }
.refinery-option .toggle small, .decree-toggle small { margin-block-start: .12rem; }
.refinery-option .field-with-help { align-items: start; }
.refinery-option .hint { margin-block: .15rem 0; overflow-wrap: anywhere; }
.tool-sidebar .sidebar-decree {
  grid-column: 1 / -1;
  padding-block-end: .35rem;
  border-block-end: 1px solid var(--table-line);
}

/* Compact Base Build controls */
.tool-sidebar .base-deep-desert {
  padding: .25rem .7rem;
}
.base-deep-desert .toggle {
  align-items: center;
  min-height: 2.75rem;
  margin: 0;
}
.tool-sidebar .selected-equipment-panel {
  padding: .35rem .7rem .5rem;
}
.selected-equipment-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 .35rem;
}
.selected-equipment-header h3 {
  margin: 0;
}
.selected-equipment-header .text-btn {
  padding: .2rem .35rem;
}
#selected-equipment .equipment-row {
  gap: .2rem .45rem;
  padding-block: .35rem;
}
#selected-equipment .equipment-title {
  padding: 0;
  line-height: 1.25;
}
#selected-equipment .equipment-cost-preview {
  grid-row: 1 / span 2;
}
#selected-equipment .equipment-stepper {
  grid-area: 2 / 2;
  gap: .25rem;
}
#selected-equipment .equipment-stepper input {
  padding-inline: .2rem;
}

.saved-base-actions {
  margin: .35rem 0 .6rem;
}

.refinery-compact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}
.refinery-compact-heading h4 {
  margin: 0;
}
#refinery-run-list,
#refinery-preset-list {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}
#refinery-run-list {
  padding: .2rem;
}
#refinery-run-list:has(li:nth-child(7)) {
  max-height: 16rem;
  overflow-y: auto;
}
#refinery-run-list li + li {
  margin-block-start: .25rem;
}
#refinery-run-list button,
#refinery-all-runs {
  width: 100%;
  text-align: start;
  padding: .4rem .55rem;
  overflow-wrap: anywhere;
}
#refinery-all-runs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block: .5rem;
  padding-inline: .75rem;
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-gold);
  font-size: 1rem;
  font-weight: 750;
}
#refinery-all-runs:hover { background: var(--gold-hover); }
#refinery-all-runs[aria-current] { box-shadow: inset 0 0 0 2px var(--on-gold); }
#refinery-all-runs .all-runs-current,
#refinery-all-runs[aria-current] .all-runs-arrow { display: none; }
#refinery-all-runs[aria-current] .all-runs-current { display: inline; }
#refinery-run-list button {
  display: grid;
  gap: .05rem;
}
#refinery-run-list button span {
  color: var(--muted);
  font-size: .8125rem;
}
#refinery-run-list button[aria-current] {
  border-inline-start: .25rem solid var(--gold);
  background: var(--control-hover);
}
#refinery-run-editor > label {
  margin-block: .25rem .4rem;
  min-width: 0;
  overflow: clip;
  overflow-clip-margin: .35rem;
}
#refinery-run-editor .result-jump {
  margin: .45rem 0 0;
}
#refinery-preset-list li {
  padding: .35rem 0;
  border-block-start: 1px solid var(--table-line);
  overflow-wrap: anywhere;
}
#refinery-preset-list .actions {
  gap: .3rem;
}
#preset-form {
  margin-block-start: .35rem;
}
#preset-form label {
  margin: 0;
}
#preset-form input {
  margin-block: .2rem .35rem;
}
#preset-status:empty {
  margin: 0;
}

#refinery-queue-settings { margin-block-start: .65rem; }
#refinery-queue-settings .number-entry { max-inline-size: 14rem; }
#refinery-ingredients { margin-block-start: .65rem; }
.tool-output .refinery-queues {
  border-inline-start: .2rem solid var(--gold);
  padding: .6rem .75rem;
}
.refinery-queues h3,
.refinery-queues p {
  margin: 0 0 .3rem;
}
#base-fuel-sizing {
  margin-block-start: .45rem;
}
.base-supply-totals {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.base-supply-totals > div {
  display: flex;
  min-width: 0;
}
.base-supply-totals .metric {
  width: 100%;
  border-inline-start: .2rem solid var(--gold);
}

/* Tool heading actions */
.tab-panel > .section-title:has(.tool-header-actions) {
  flex-flow: row wrap;
  align-items: center;
  gap: .35rem .55rem;
}
.tool-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
  margin-inline-start: auto;
}
.tool-action-group,
.tool-header-actions .field-with-help {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.tool-action-group {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}
.tool-header-actions button:not(.help-button) {
  min-height: 2.75rem;
  padding: .35rem .6rem;
  font-size: .875rem;
}
.tool-header-actions :is([data-export-csv], [data-copy-link], #copy-run, .tool-reset) {
  min-inline-size: 7rem;
}
.tool-header-actions .help-button {
  min-width: 2rem;
  min-height: 2rem;
}
.share-link-fallback {
  padding: .6rem .8rem;
  margin-block-end: .65rem;
}
.share-link-fallback p {
  margin: .35rem 0 0;
}
#shared-report {
  width: min(62rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: clamp(.8rem, 2.5vw, 1.4rem);
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  overflow-wrap: anywhere;
}
#shared-report::backdrop {
  background: rgb(0 0 0 / 65%);
}
.shared-report-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-block-end: .55rem;
}
.shared-report-header h2 {
  margin: 0;
}
.shared-report-header .actions {
  margin: 0;
}
.shared-report-header button {
  min-height: 2.75rem;
}
#shared-report-body h3 {
  margin-block: .75rem .3rem;
}
.shared-report-items {
  margin: 0;
}
.shared-report-items > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: .2rem .75rem;
  padding: .4rem 0;
  border-block-start: 1px solid var(--table-line);
}
.shared-report-items dt {
  font-weight: 700;
}
.shared-report-items dd {
  margin: 0;
}
.shared-report-items dd span {
  color: var(--muted);
  font-weight: 600;
}

#contact-open {
  margin-block-start: .8rem;
}
#contact-dialog {
  width: min(32rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: clamp(.8rem, 3vw, 1.25rem);
  background: var(--panel);
  color: var(--text);
  overflow: auto;
}
#contact-dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}
.contact-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-block-end: .65rem;
}
#contact-form label {
  margin: .55rem 0 0;
  color: var(--text);
}
#contact-form :is(input, textarea) {
  margin-block-start: .2rem;
}
#contact-form textarea {
  font: inherit;
}
.contact-actions {
  align-items: center;
}
.contact-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.base-preset-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .55rem .8rem;
}
.base-preset-fields > * {
  min-width: 0;
}
.base-preset-fields label {
  margin: 0;
  color: var(--text);
}
.base-preset-fields :is(input, select) {
  margin-block: .2rem .4rem;
}
.base-preset-fields .actions {
  gap: .35rem;
}
#base-preset-status:empty {
  margin: 0;
}


#gather > .gather-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "controls" "results" "plan";
  align-items: start;
  gap: .65rem;
}
.gather-settings-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .2rem .65rem;
  margin-block-end: .3rem;
}
#gather .gather-settings-heading :is(h3, label) { margin: 0; }
#gather .gather-refinery-settings .hint { margin-block: .3rem 0; }
.gather-plan-controls { grid-area: controls; }
.gather-results-sidebar { grid-area: results; }
#gather-output-line {
  margin: 0;
  padding: .35rem .65rem;
  border: 1px solid var(--table-line);
  border-radius: .4rem;
  background: var(--metric-bg);
  overflow-wrap: anywhere;
}
.gather-plan-content { grid-area: plan; grid-template-columns: minmax(0, 1fr); }
.gather-plan-controls, .gather-plan-content, .gather-results-sidebar {
  display: grid;
  gap: .6rem;
  min-width: 0;
}
#gather .gather-layout :is(.gather-plan-controls, .gather-plan-content, .gather-results-sidebar) .panel,
#specialization #gather-yield-estimate {
  min-width: 0;
  margin: 0;
  padding: .6rem .75rem;
}
#gather .gather-layout :is(h3, h4),
#specialization #gather-yield-estimate > h3 { margin-block: 0 .3rem; }
#gather .gather-layout label,
#specialization #gather-yield-estimate label { min-width: 0; margin-block: .15rem; }
#gather .gather-layout :is(input:not([type="checkbox"]), select),
#specialization #gather-yield-estimate :is(input, select) { min-width: 0; max-width: 100%; }
.gather-field-grid, .gather-yield-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .4rem .65rem;
}
.gather-field-grid > div { min-width: 0; }
.gather-trip-facts { display: grid; gap: .35rem; margin: .4rem 0 0; }
.gather-trip-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; padding: .35rem 0; border-top: 1px solid var(--table-line); }
.gather-trip-facts small { display: block; margin-block-start: .1rem; color: var(--muted); }
.gather-trip-facts dd { margin: 0; text-align: end; font-weight: 650; max-width: 8rem; overflow-wrap: anywhere; }
.gather-estimate-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gather-estimate-heading h3 { margin: 0; }
.gather-estimate-card .hint { margin-block: .3rem; }
#gather-harvest-entry { margin-block-start: .65rem; padding-block-start: .55rem; border-top: 1px solid var(--table-line); }
#gather-harvest-entry-heading { margin: 0; }
#gather-harvest-form { margin-block-start: .4rem; }
#gather-harvest-form .actions { margin-block-start: .4rem; }
.gather-trip-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem;
  margin-block-end: .3rem;
}
#gather .gather-trip-heading :is(h3, label) { margin: 0; }
.gather-backpack-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 1.5rem;
  max-width: 9rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.2;
}
.gather-backpack-toggle input { flex: none; margin: 0; }
#gather-cargo-results .metrics, #gather-result-summary .metrics { margin-block: .4rem; }
#gather-result-summary .metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
@media (min-width: 56rem) {
  #gather > .gather-layout {
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
    grid-template-areas: "controls results" "plan results";
    grid-template-rows: auto 1fr;
  }
}