/* Reid Wind Scale
   Plain, document-first styling. No framework. */

:root {
  --ink: #20252a;
  --muted: #59636c;
  --rule: #c5cdd4;
  --blue: #174d78;
  --blue-dark: #103653;
  --panel: #f2f5f7;
  --stripe: #fafbfc;
  --warning: #fff8df;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}

.site-mark { height: 7px; background: var(--blue-dark); }

.site-header,
.site-nav .wrap,
main,
.site-footer .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.site-header { padding-top: 22px; padding-bottom: 18px; }
.site-header h1 { margin: 0; color: var(--blue-dark); font-size: 27px; font-weight: 600; }
.site-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

.site-nav { background: var(--blue); border-bottom: 4px solid #d9e3eb; }
.site-nav a {
  display: inline-block;
  padding: 10px 0;
  margin-right: 28px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; }

main { padding-top: 28px; padding-bottom: 52px; }

h2 {
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--blue-dark);
  font-size: 24px;
  font-weight: 500;
}

h3 { margin: 28px 0 10px; color: var(--blue); font-size: 18px; }
p { max-width: 900px; }
.lead { font-size: 17px; }

.notice {
  margin: 18px 0;
  padding: 12px 15px;
  border-left: 4px solid var(--blue);
  background: var(--panel);
}
.notice.warning { border-left-color: #9b7418; background: var(--warning); }

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}
.link-box {
  padding: 16px;
  border: 1px solid var(--rule);
  transition: border-color 120ms ease, transform 120ms ease;
}
.link-box:hover { border-color: #7e94a6; transform: translateY(-1px); }
.link-box h3 { margin: 0 0 6px; font-size: 17px; }
a { color: #15527f; }

table { width: 100%; border-collapse: collapse; margin: 14px 0 25px; font-size: 14px; }
th, td { padding: 8px 9px; border: 1px solid #bcc6ce; text-align: left; vertical-align: top; }
th { color: #183a58; background: #e7edf2; }
tbody tr:nth-child(even) { background: var(--stripe); }

.rating { color: var(--blue-dark); font-weight: bold; }
.small { color: var(--muted); font-size: 12px; }

fieldset {
  margin: 18px 0 24px;
  padding: 16px;
  border: 1px solid var(--rule);
}
legend { padding: 0 7px; color: var(--blue-dark); font-weight: bold; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; }
label { display: block; margin-bottom: 4px; color: #2a3e4e; font-weight: bold; }
.required { color: #9b1c1c; }
input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #96a5b1;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9fc0d8; outline-offset: 1px; }

.actions { display: flex; gap: 9px; margin: 18px 0; }
button {
  padding: 9px 16px;
  border: 1px solid #103c5e;
  border-radius: 0;
  background: #235b87;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
button:hover { background: #19496e; }
button.secondary { border-color: #8e989f; background: #eee; color: #222; }

.result {
  display: none;
  margin-top: 24px;
  padding: 17px;
  border: 1px solid #8fa4b5;
  background: #f5f7f9;
  animation: result-in 180ms ease-out;
}
@keyframes result-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-title { color: var(--blue-dark); font-size: 28px; font-weight: bold; }
.comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 15px 0;
  border: 1px solid var(--rule);
}
.comparison div { padding: 10px 12px; border-right: 1px solid var(--rule); }
.comparison div:last-child { border-right: 0; }
.comparison small { display: block; color: var(--muted); text-transform: uppercase; }
.comparison strong { display: block; margin-top: 2px; color: var(--blue-dark); font-size: 20px; }

.meter { height: 8px; margin: 8px 0 5px; background: #d9dfe4; }
.meter span { display: block; height: 100%; background: var(--blue); transition: width 250ms ease; }

.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 0 0 16px; }

.site-footer { border-top: 1px solid var(--rule); background: #f1f3f4; color: #555; font-size: 12px; }
.site-footer .wrap { padding-top: 19px; padding-bottom: 28px; }

@media (max-width: 720px) {
  .form-grid, .link-grid, .filters, .comparison { grid-template-columns: 1fr; }
  .comparison div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .comparison div:last-child { border-bottom: 0; }
  .hide-small { display: none; }
  .site-nav a { margin-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* Motion
   Kept restrained so the site still reads like a research/reference site. */

.site-header h1,
.site-header p {
  animation: header-in 420ms ease-out both;
}
.site-header p { animation-delay: 70ms; }

@keyframes header-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-nav {
  position: relative;
  z-index: 10;
}

.site-nav a {
  position: relative;
  transition: transform 160ms ease, opacity 160ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 6px;
  height: 2px;
  background: #fff;
  transition: right 180ms ease;
}

.site-nav a:hover {
  opacity: .9;
  transform: translateY(-1px);
  text-decoration: none;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  right: 0;
}

.site-nav a[aria-current="page"] {
  text-decoration: none;
}

main > * {
  opacity: 0;
  transform: translateY(7px);
  animation: section-in 360ms ease-out forwards;
}

main > *:nth-child(2) { animation-delay: 35ms; }
main > *:nth-child(3) { animation-delay: 70ms; }
main > *:nth-child(4) { animation-delay: 105ms; }
main > *:nth-child(5) { animation-delay: 140ms; }
main > *:nth-child(6) { animation-delay: 175ms; }
main > *:nth-child(n+7) { animation-delay: 200ms; }

@keyframes section-in {
  to { opacity: 1; transform: translateY(0); }
}

.link-box {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.link-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--blue);
  transition: height 190ms ease;
}

.link-box:hover {
  transform: translateY(-3px);
  border-color: #8096a8;
  background: #fbfcfd;
}

.link-box:hover::before { height: 100%; }

tbody tr {
  transition: background 120ms ease, transform 120ms ease;
}

tbody tr:hover {
  background: #eef3f6;
}

button {
  position: relative;
  transition: background 130ms ease, transform 90ms ease, box-shadow 130ms ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

button:active {
  transform: translateY(1px);
  box-shadow: none;
}

input,
select,
textarea {
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #4d7898;
  box-shadow: 0 0 0 2px rgba(35,91,135,.12);
}

.notice {
  transition: border-left-width 150ms ease, background 150ms ease;
}

.notice:hover {
  border-left-width: 7px;
}

.result {
  transform-origin: top center;
  animation: result-open 300ms ease-out;
}

@keyframes result-open {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.comparison div {
  transition: background 140ms ease;
}

.comparison div:hover {
  background: #edf2f5;
}

.meter span {
  transform-origin: left;
  animation: meter-in 500ms ease-out;
}

@keyframes meter-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.site-footer {
  animation: footer-in 450ms ease-out both;
}

@keyframes footer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}