@import url("./design-system.css");
* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
}

.shell {
  width:min(1060px,calc(100% - 64px));
  margin:auto;
}

header {
  height:102px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:28px;
}

a {
  color:inherit;
}

.brand {
  text-decoration:none;
  font-size:28px;
  font-weight:750;
  letter-spacing:-1.2px;
  display:flex;
  align-items:center;
}

.brand-mark {
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--color-primary);
  border-radius:10px;
  width:34px;
  height:34px;
  font-size:26px;
  margin-right:10px;
}

.brand-dot {
  color:var(--green);
}

.header-note {
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:center;
}

.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-success);
}

.api-link {
  font-size:12px;
  text-decoration:none;
  border-left:1px solid var(--line);
  padding-left:26px;
}

.hero {
  padding:70px 0 34px;
  text-align:center;
}

.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:1.7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--green);
}

.eyebrow>span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
}

h1 {
  font-size:clamp(36px,5.5vw,62px);
  line-height:1.13;
  letter-spacing:-2.5px;
  font-weight:560;
  margin:22px 0;
}

h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--green);
}

.subtitle {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  margin-bottom:35px;
}

form {
  max-width:780px;
  margin:0 auto;
  text-align:left;
}

label {
  font-size:11px;
  font-weight:600;
  display:block;
  margin-bottom:10px;
}

.input-row {
  padding:7px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  display:flex;
  gap:8px;
  box-shadow:0 5px 20px transparent;
  align-items:center;
}

.input-icon {
  color:var(--color-text-muted);
  font-size:23px;
  margin:0 8px 0 12px;
}

input {
  min-width:0;
  flex:1;
  border:0;
  background:transparent;
  font:inherit;
  padding:12px 0;
  color:var(--ink);
  outline:none;
}

.input-row:focus-within {
  outline:2px solid var(--color-primary);
  outline-offset:3px;
}

button {
  cursor:pointer;
  font:inherit;
}

button:disabled {
  opacity:.65;
  cursor:wait;
}

#analyze-button {
  background:var(--green);
  border:0;
  border-radius:7px;
  color:var(--color-surface);
  font-size:12px;
  padding:16px 22px;
  white-space:nowrap;
  font-weight:600;
  display:flex;
  gap:20px;
}

#analyze-button:hover {
  background:var(--color-primary-hover);
}

.form-note {
  display:flex;
  justify-content:space-between;
  color:var(--color-text-muted);
  font-size:10px;
  padding:12px 2px;
}

.history {
  max-width:780px;
  margin:0 auto 30px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px;
}

h2 {
  font-size:15px;
  font-weight:600;
  margin:0;
}

.history h2 {
  font-size:11px;
  color:var(--muted);
}

.text-button {
  border:0;
  background:none;
  color:var(--muted);
  font-size:10px;
}

.history-note {
  color:var(--muted);
  font-size:10px;
}

#history-list {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

#history-list button {
  border:1px solid var(--line);
  border-radius:5px;
  padding:6px 9px;
  font-size:11px;
  background:var(--color-surface);
  color:var(--color-text-muted);
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#notice {
  max-width:780px;
  margin:10px auto 24px;
  background:var(--color-success-surface);
  padding:15px;
  border-radius:8px;
  color:var(--color-success);
  line-height:1.6;
}

#notice.error {
  background:var(--color-error-surface);
  color:var(--color-error);
}

#results {
  margin:22px auto 55px;
  max-width:1060px;
}

.small-label {
  font-size:10px;
  letter-spacing:.6px;
  color:var(--muted);
}

.empty-state {
  text-align:center;
  border-top:1px solid var(--line);
  margin:25px auto 60px;
  padding:36px 0 0;
  max-width:780px;
}

.route-demo {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}

.route-demo span {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid var(--color-border);
  border-radius:9px;
  background:var(--color-surface);
  color:var(--color-text-muted);
  font-size:20px;
}

.route-demo i {
  width:46px;
  border-top:1px dashed var(--color-border);
  margin:0 8px;
}

.empty-state h2 {
  font-size:15px;
}

.empty-state p {
  color:var(--muted);
  font-size:12px;
  max-width:360px;
  margin:12px auto;
  line-height:1.9;
}

.features {
  display:flex;
  justify-content:center;
  gap:35px;
  margin-top:30px;
  font-size:10px;
  color:var(--color-text-muted);
}

.features b {
  font-weight:400;
  color:var(--color-text-muted);
  margin-left:6px;
}

footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:23px 0 30px;
  color:var(--color-text-muted);
  font-size:10px;
  gap:20px;
}

.footer-divider {
  margin:0 10px;
  color:var(--color-border);
}

[hidden] {
  display:none!important;
}

:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:4px;
}

@media(max-width:650px) {
  .shell {
    width:calc(100% - 32px);
  }
  header {
    height:78px;
  }
  .header-note {
    display:none;
  }
  .api-link {
    margin-left:auto;
    border:0;
  }
  .hero {
    padding-top:48px;
  }
  h1 {
    letter-spacing:-1.5px;
  }
  .subtitle {
    font-size:12px;
  }
  .input-icon {
    display:none;
  }
  input {
    padding-left:10px;
    font-size:12px;
  }
  #analyze-button {
    padding:15px 12px;
    gap:8px;
  }
  .form-note {
    font-size:9px;
  }
  .features {
    gap:12px;
    flex-wrap:wrap;
  }
  footer {
    flex-direction:column;
    gap:12px;
  }
}


/* Shared product shell and accessible component states. */
body { font-family: var(--font-interface); font-size: 15px; }
header.shell { height: auto; min-height: 96px; gap: 14px; flex-wrap: wrap; padding-block: 18px; }
.ecosystem-brand { color: var(--color-text); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.brand-divider { color: var(--color-text-muted); }
.brand { font-size: 24px; }
.brand-mark { background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border); }
.header-note { display: none; }
h1 em { font-family: inherit; font-style: normal; font-weight: inherit; }
.input-row { box-shadow: none; }
#analyze-button, .primary-button { color: var(--color-background); font-weight: 650; }
a:hover { color: var(--color-primary-hover); }
button, .account-nav a, summary { min-height: 44px; }
.account-nav a { display: inline-flex; align-items: center; }
input { font-size: 16px; }
input::placeholder { color: var(--color-text-muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.text-button, .field-help, .form-note, .history-note, .small-label, footer { font-size: 12px; }
@media (max-width: 768px) { .account-nav { width: 100%; justify-content: flex-start; gap: 16px; } }
@media (max-width: 400px) { .input-row { flex-wrap: wrap; } #analyze-button { width: 100%; justify-content: center; } .form-note { flex-wrap: wrap; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.input-row { border-color: var(--color-control-border); }
.hero { padding-top: 48px; }