/* HSPingal — the thin frame every app sits in: masthead and footer.
   Everything else about an app's look lives in its own stylesheet in /assets/apps/. */

:root {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html { background: var(--c-bg); }
body {
  background: var(--c-bg) !important;
  color: var(--c-fg);
  font-family: var(--app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app-mast { position: relative; overflow: hidden; border-bottom: var(--mast-line, 1px solid var(--border2)); }
.app-mast-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  width: min(var(--app-w, 960px), 100% - 32px);
  margin-inline: auto;
  padding: 16px 0 20px;
}
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.app-mine { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.app-mine .tile { width: 40px; height: 40px; flex: none; }
.app-mine b { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; }
.app-by { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--c-sub); font: 500 0.78rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-decoration: none; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.app-by:hover { color: var(--c-fg); border-color: var(--c-fg); }
.app-by svg { width: 18px; height: 18px; flex: none; }
.app-h1 { margin: 0; font-family: var(--c-font); font-weight: var(--c-weight, 700); font-size: clamp(2rem, 5.6vw, 3.4rem); line-height: 1.03; letter-spacing: var(--h1-track, -0.025em); color: var(--c-fg); }
.app-tag { margin: 8px 0 0; max-width: 34rem; font-size: clamp(0.95rem, 1.7vw, 1.08rem); line-height: 1.45; color: var(--c-sub); }
.app-mast .scene { display: none; width: 100%; max-width: 310px; height: auto; justify-self: end; }
@media (min-width: 720px) {
  .app-mast-in { grid-template-columns: minmax(0, 1fr) 300px; padding-bottom: 14px; }
  .app-top { grid-column: 1 / -1; margin-bottom: 0; }
  .app-mast .scene { display: block; }
}

.app-foot { margin-top: auto; padding: 22px 0 28px; border-top: 1px solid var(--border2); color: var(--c-sub); font: 400 0.84rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.app-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; width: min(var(--app-w, 960px), 100% - 32px); margin-inline: auto; }
.app-foot p { margin: 0; max-width: 34rem; }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.app-foot a { color: var(--c-fg); text-underline-offset: 3px; }

.app-body { width: min(var(--app-w, 960px), 100% - 32px); max-width: none !important; margin-inline: auto !important; padding: 26px 0 44px !important; }

.drop-icon { line-height: 0; margin-bottom: 12px !important; }
.drop-icon .tile { width: 58px; height: 58px; display: inline-block; }
.btn-ico { width: 18px; height: 18px; display: block; flex: none; }

/* Apps have one strong action colour, not a gradient. */
.gen-btn, .dl-btn, .compress-btn, .export-btn, .btn-primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.gen-btn:hover, .dl-btn:hover, .compress-btn:hover:not(:disabled), .export-btn:hover:not(:disabled), .btn-primary:hover { opacity: 1 !important; filter: brightness(1.08); }
.toggle input:checked + .slider { background: var(--accent) !important; }
.progress-bar { background: var(--accent); }
.stat-val.green, .item-sizes .saved { color: var(--ok); }

select, input, textarea, button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}