/* Archiebald Reports — app-specific layer on top of Heritage
   design-system.css + saas.css. Tokens only, no raw values. */

body { margin: 0; background: var(--bg); font-family: var(--font-sans); }

/* The hidden attribute must beat component display rules (.app is a grid,
   .login-wrap a flexbox — author display would otherwise override UA hidden). */
[hidden] { display: none !important; }

/* ---- Sign-in screen (marketing surface: sculpted neumorphism) ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
}
.login-card {
  background: var(--bg-elev); border-radius: var(--r-xl); box-shadow: var(--shadow-out);
  padding: var(--s-7) var(--s-7); max-width: 420px; text-align: center;
}
.login-crest { margin: 0 auto var(--s-4); }
.login-card h1 {
  font: 500 32px/1.1 var(--font-sans); letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.login-card h1 em { font-style: italic; font-weight: 300; }
.login-card p {
  font: 400 14px/1.55 var(--font-sans); color: var(--ink-2); margin: 0 0 var(--s-5);
}
.login-err { color: #c0322a; font-size: 13px; margin-top: var(--s-4); }

/* ---- Console additions ---- */
.empty {
  padding: var(--s-6); text-align: center;
  font: 400 14px/1.5 var(--font-sans); color: var(--ink-3);
}
.dtable tbody tr { cursor: pointer; }
.dtable td.period { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Upload form ---- */
.upload-panel { max-width: 640px; }
.upload-panel form { display: flex; flex-direction: column; gap: var(--s-4); }
.upload-panel .frow { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.upload-panel label {
  display: flex; flex-direction: column; gap: var(--s-2); flex: 1;
  font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.upload-panel input, .upload-panel select, .upload-panel textarea {
  font: 400 14px/1.4 var(--font-sans); color: var(--ink);
  background: var(--well, var(--bg)); border: 0; border-radius: var(--r-sm);
  box-shadow: var(--shadow-in); padding: 10px 12px; outline: none;
}
.upload-panel textarea { font-family: var(--font-mono); font-size: 12.5px; resize: vertical; }
.upload-panel input:focus-visible, .upload-panel select:focus-visible,
.upload-panel textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload-msg { font: 500 13px/1.4 var(--font-sans); }
.upload-msg.ok { color: var(--ok); }
.upload-msg.err { color: #c0322a; }

.apihint {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.apihint .l {
  font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2);
}
.apihint p { font: 400 13px/1.5 var(--font-sans); color: var(--ink-2); margin: 0 0 var(--s-2); }
.apihint pre {
  font: 400 12px/1.6 var(--font-mono); color: var(--ink-2);
  background: var(--bg-deep); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); overflow-x: auto; margin: 0;
}

/* Night-mode niceties for the app layer */
.app.night .apihint pre { background: rgba(233, 239, 236, 0.06); }
.app.night .login-err, .app.night .upload-msg.err { color: #e07a72; }