/* Copyright 2026 G&G Technologies S.r.l. — SPDX-License-Identifier: Apache-2.0 */

/* The palette and the handful of components every app repeats.

   This sheet used to be the top third of csv-scope/run/styles.css, with a comment saying it would
   move here when a second app existed. It does now, so it did. What is here is what two apps
   needed identically; anything one of them shapes differently stays in its own styles.css.

   The palette is still redeclared rather than pulled from assets/site.css, and that part has not
   changed: site.css is generated by the site build and versioned with a query string that changes
   on every rebuild, so an app leaning on it breaks later, when nobody is looking. This file is
   the one place to update when the brand palette moves. */

:root {
  color-scheme: dark;
  --bg: #0d1220;
  --panel: #172136;
  --panel-2: #1e2a43;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);
  --text: #eef1f8;
  --muted: #aab3c9;
  --faint: #8f98ad;
  --trace: #6b7690;
  --accent: #34d399;
  --accent-text: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.10);
  --btn-text: #05221a;
  --radius: 16px;
  --radius-sm: 8px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: ui-serif, Georgia, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --panel: #ffffff;
  --panel-2: #eef2fa;
  --border: rgba(13, 18, 32, 0.10);
  --border-strong: rgba(13, 18, 32, 0.18);
  --text: #0d1220;
  --muted: #4a5266;
  --faint: #5b6377;
  --trace: #6d7689;
  --accent: #059669;
  --accent-text: #047857;
  --accent-soft: rgba(5, 150, 105, 0.10);
  --btn-text: #ffffff;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #f6f8fc;
    --panel: #ffffff;
    --panel-2: #eef2fa;
    --border: rgba(13, 18, 32, 0.10);
    --border-strong: rgba(13, 18, 32, 0.18);
    --text: #0d1220;
    --muted: #4a5266;
    --faint: #5b6377;
    --trace: #6d7689;
    --accent: #059669;
    --accent-text: #047857;
    --accent-soft: rgba(5, 150, 105, 0.10);
    --btn-text: #ffffff;
  }
}

* { box-sizing: border-box; }

/* An author rule beats the browser's own `[hidden] { display: none }`, so a section styled with
   `display: flex` stays on screen while carrying the attribute. That is how the selection bar of a
   file nobody had opened yet ended up under the drop area on the very first run. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

/* The stretch has to be handed down: `flex: 1` on a child does nothing while its parent is an
   ordinary block, and the footer floats up under the text instead of sitting at the bottom. */
main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--border-strong); }

/* A control that cannot do anything has to look like it. Several already switched themselves off —
   zooming out with the whole file on screen, playing something that has nowhere to scroll — and
   without this rule they went on looking exactly as clickable as the rest, so the only feedback
   for pressing them was that nothing happened. Kept hoverable, because the tooltip explains why. */
button:disabled, input:disabled {
  opacity: 0.38;
  cursor: default;
}

/* Focus has to be visible: these apps can be driven entirely from the keyboard, and an invisible
   focus ring makes that path unusable rather than merely awkward. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.primary {
  background: var(--accent);
  color: var(--btn-text);
  border-color: transparent;
  font-weight: 500;
}

.ghost { border-color: transparent; padding: 6px 8px; }

.ghost.small { color: var(--faint); font-size: 12.5px; padding: 5px 8px; }

.ghost.small:hover:not(:disabled) { color: var(--text); background: rgba(127, 140, 170, 0.10); }

.ghost.icon { display: inline-flex; align-items: center; padding: 5px 7px; }

/* An outline says "this is the action" without teaching a second meaning for the accent, which
   elsewhere means "selected". */
.accent {
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 500;
}

.accent:hover { background: var(--accent-soft); border-color: var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------
   app bar
   --------------------------------------------------------------------------------------------- */

/* The top level of the toolbar: the app and its settings. It never changes, so it is small, grey
   and low-contrast — everything below it is what the visitor is actually doing, and gets the
   contrast. Six controls at one altitude read as six equally important things. */

.appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 34px;
}

.appbar .brand {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--muted);
}

.appbar .meta { font-size: 11.5px; color: var(--faint); }

.spacer { flex: 1 1 auto; }

.hint {
  width: 100%;
  font-size: 12px;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
  padding: 7px 14px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------
   error
   --------------------------------------------------------------------------------------------- */

.error {
  margin: 24px auto;
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px 20px;
}

.error h2 { font-family: var(--font-display); font-weight: 400; font-size: 18px; margin: 0 0 6px; }

.error p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------------------------------------
   foot
   --------------------------------------------------------------------------------------------- */

.foot {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--faint);
  flex-wrap: wrap;
}

.foot a { color: var(--faint); }