/* UI fixes (owner: 10-*). Pairs with tools/patches/10-ui-fixes.js and public/local/10-ui.js. */

/* 1. Tutorial header icon buttons: the global `button{padding:.6em 1.2em}` pushed the 20px icon
      out of the 40px grid cell to the right. */
.st-iconbtn { padding: 0; }

/* 6/7. Feature flags. 10-ui.js sets html.sg-off-<key> from /api/local/config (and generates the same
        rules for any flag added later). Until the config is known everything flagged stays hidden. */
html.sg-flags-pending [data-sg-flag],
html.sg-off-community [data-sg-flag~="community"],
html.sg-off-discord [data-sg-flag~="discord"],
html.sg-off-lootcube [data-sg-flag~="lootcube"] { display: none !important; }
html:not(.sg-flags-pending):not(.sg-off-discord) [data-sg-flag-off~="discord"] { display: none !important; }
.sg10-contents { display: contents; }

/* landing page: News tile alone when the Community tile is hidden */
html.sg-flags-pending .fd-duo,
html.sg-off-community .fd-duo,
html.sg-off-discord .fd-duo { grid-template-columns: 1fr; }
/* about page: the card after the hidden Community card spans the row */
html.sg-flags-pending .sg10-contents[data-sg-flag] + *,
html.sg-off-community .sg10-contents[data-sg-flag] + *,
html.sg-off-discord .sg10-contents[data-sg-flag] + * { grid-column: 1 / -1; }
/* settings: without the Discord column, Email and Password sit side by side */
html.sg-flags-pending .sg10-settings-main,
html.sg-off-discord .sg10-settings-main { display: contents; }
html.sg-flags-pending .sg10-settings-grid,
html.sg-off-discord .sg10-settings-grid { align-items: start; }

/* 2. Close button on field / building detail panels */
.sg10-has-close { position: relative; }
.sg10-panel-close {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 999px;
  color: #ddd6c6; border: 1px solid #161412;
  background: linear-gradient(180deg, #3e3933 0%, #292622 100%);
  box-shadow: inset 0 1px #f4f2eb2e, inset 0 -1px #00000080, 0 3px 8px #00000080;
  cursor: pointer; transition: filter .14s ease, transform .14s ease;
}
.sg10-panel-close:hover { color: #f7f5f1; filter: brightness(1.15); }
.sg10-panel-close:active { transform: scale(.96); }
.sg10-panel-close:focus-visible { outline: 2px solid var(--ui-accent-bright, #e07a52); outline-offset: 2px; }
.sg10-panel-close svg { width: 18px; height: 18px; display: block; }
@media (max-width: 639px) { .sg10-panel-close { top: 8px; right: 8px; width: 38px; height: 38px; } }
/* keep the title clear of the button */
.sg10-has-close .bd-title { padding-right: 48px; }
@media (max-width: 767px) { .sg10-has-close .bd-title { padding-right: 0; } }

/* 7. Admin link card on the settings page */
.sg10-admin-card { grid-column: 1 / -1; }
.sg10-admin-card .sg10-admin-body { display: flex; flex-direction: column; gap: 14px; }
.sg10-admin-card .sg10-admin-body p { margin: 0; }
.sg10-admin-card a { text-align: center; text-decoration: none; }
@media (min-width: 1024px) { .sg10-admin-card .sg10-admin-body { flex-direction: row; align-items: center; justify-content: space-between; } .sg10-admin-card a { flex: none; width: auto; padding-left: 2rem; padding-right: 2rem; } }