/* Solar Juice developer portal.
   Brand ink #010101 and amber #FBBD19, from the official Solar Juice
   brand vectors; the wordmark is static/solarjuice.svg. Follows the LMS at
   lms.solarjuice.com.au: light ground, white cards with soft shadows,
   amber as the single accent. Hand written because the portal's CSP is
   default-src 'self' and no CDN or build step is available. */
:root {
  --navy: #081f2d;
  --navy-soft: #16394d;
  --amber: #fbbd19;
  --amber-dark: #e2a600;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #10222e;
  --muted: #5b6b78;
  --line: #e3e8ec;
  --line-soft: #eef2f5;
  --accent: #12557d;
  --danger: #a4262c;
  --ok: #1e7a3a;
  --warn: #8a5a00;
  --shadow: 0 1px 2px rgba(8, 31, 45, .06), 0 8px 24px rgba(8, 31, 45, .06);
  --shadow-lg: 0 2px 4px rgba(8, 31, 45, .06), 0 16px 40px rgba(8, 31, 45, .10);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.6 var(--sans);
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--navy); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ---- header ---- */
.top { background: var(--panel); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand-mark { height: 26px; width: auto; display: block; }
.brand-tag {
  display: inline-block;
  background: var(--amber);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.top-nav { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.top-nav a { text-decoration: none; color: var(--navy-soft); font-weight: 500; }
.top-nav a:hover { color: var(--navy); text-decoration: underline; }
.who { color: var(--muted); font-size: 14px; }

/* ---- layout ---- */
main { flex: 1 0 auto; padding: 26px 24px 30px; }
/* Centre the landing hero in whatever height is left between the header and
   the footer. Scoped to the landing class so the dashboard stays top aligned. */
body.landing main { display: flex; flex-direction: column; justify-content: center; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; color: var(--navy); }
h2 { font-size: 17px; margin: 0 0 10px; color: var(--navy); }
h3 { font-size: 14.5px; margin: 0 0 2px; color: var(--navy); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.clickable { cursor: pointer; }
.stack > * + * { margin-top: 12px; }

/* ---- hero (signed out) ---- */
.hero { display: grid; grid-template-columns: 1fr 390px; gap: 34px; align-items: start; }
.hero-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--amber); }
.hero h1 { font-size: 30px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; }
.hero-lead { font-size: 15.5px; color: var(--muted); margin: 0 0 22px; max-width: 62ch; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; margin: 0 0 22px; }
.feature { display: flex; gap: 11px; }
.feature-icon {
  flex: 0 0 29px; height: 29px; border-radius: 8px;
  background: rgba(251, 189, 25, .18);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 16px; height: 16px; display: block; }
.feature p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---- cards ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card.narrow { max-width: 460px; }
.card.signin { box-shadow: var(--shadow-lg); margin-bottom: 0; }
.card-note {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted);
}
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* ---- forms ---- */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=email], select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); min-width: 220px; width: 100%;
}
input::placeholder { color: #9aa8b3; }
input:focus, select:focus, button:focus-visible {
  outline: 3px solid rgba(251, 189, 25, .5); outline-offset: 1px; border-color: var(--amber-dark);
}
a.btn { display: inline-block; text-decoration: none; }
.btn {
  font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--amber); background: var(--amber); color: var(--navy);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.btn:hover:not(:disabled) { background: var(--amber-dark); border-color: var(--amber-dark); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--accent); border-color: transparent; padding: 6px 10px; }
.btn-ghost:hover:not(:disabled) { background: var(--line-soft); border-color: transparent; color: var(--navy); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ---- tabs, tables, pills ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs button {
  font: inherit; font-weight: 500; background: none; border: none;
  border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--muted);
}
.tabs button:hover { color: var(--navy); }
.tabs button.active { color: var(--navy); border-bottom-color: var(--amber); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.pill.live { color: var(--ok); border-color: rgba(30, 122, 58, .35); background: rgba(30, 122, 58, .07); }
.pill.test { color: var(--warn); border-color: rgba(138, 90, 0, .35); background: rgba(251, 189, 25, .12); }
.pill.revoked { text-decoration: line-through; }
.notice { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; margin-bottom: 16px; font-size: 14px; }
.notice.error { border-color: rgba(164, 38, 44, .35); background: rgba(164, 38, 44, .06); color: var(--danger); }
.notice.ok { border-color: rgba(30, 122, 58, .35); background: rgba(30, 122, 58, .06); color: var(--ok); }
.keybox {
  font-family: var(--mono); font-size: 14px; word-break: break-all; padding: 14px;
  background: #fbfcfd; border: 1px dashed var(--amber-dark); border-radius: 8px; margin: 12px 0;
}
.scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; margin: 8px 0 14px; }
.scopes label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; margin: 0; font-weight: 400; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }

/* ---- footer ---- */
.foot { flex-shrink: 0; background: var(--panel); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.foot-row p { margin: 0; }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 27px; }
  .features { grid-template-columns: 1fr; gap: 16px; }
  .card.narrow, .card.signin { max-width: none; }
}
/* The signed-in dashboard renders tables up to seven columns wide. On a phone
   those pushed the whole document sideways: 657px of content in a 375px
   viewport, so the header, the hero and the footer all scrolled horizontally
   with the table. Containing the scroll in the card keeps the page itself
   fixed and leaves the columns readable rather than crushing them. */
@media (max-width: 760px) {
  .card { overflow-x: auto; }
  .card table { min-width: 32rem; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; flex: 0 0 auto; }
  dl.kv { grid-template-columns: 1fr; gap: 2px 0; }
  dl.kv dt { margin-top: 10px; }
  dl.kv dd { word-break: break-word; }
  .top-nav { font-size: 13px; }
  .who { width: 100%; order: 99; }
}

@media (max-width: 640px) {
  .top-row { min-height: 0; padding: 12px 0; flex-direction: column; align-items: flex-start; }
  .top-nav { gap: 14px; flex-wrap: wrap; }
  input[type=text], input[type=email], select { min-width: 0; width: 100%; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}

/* Links to the published client libraries, under the landing call to action. */
.sdks { display: flex; align-items: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.sdks-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.sdk-pill {
  display: inline-flex; align-items: center; padding: 4px 12px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--navy); text-decoration: none;
}
.sdk-pill:hover { border-color: var(--amber-dark); background: rgba(251, 189, 25, .12); color: var(--navy); }