/* Platform pages: classless styles on the tools' design tokens (testing_tool_template style.css). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --brand: #83651F; --brand-light: #a07e28; --brand-bg: rgba(131, 101, 31, 0.08);
  --bg: #F8F7F5; --surface: #FFFFFF; --border: #E2DDD6; --border-subtle: #EDE9E2;
  --text: #1A1814; --text-secondary: #6B6560;
  --success: #2E7D52; --success-bg: rgba(46, 125, 82, 0.08);
  --error: #C0392B; --error-bg: rgba(192, 57, 43, 0.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --radius-sm: 6px; --radius-md: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: "Inter", "Segoe UI", system-ui, sans-serif; line-height: 1.6;
  background: var(--bg); color: var(--text); border-top: 3px solid var(--brand);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
a:hover { color: var(--brand-light); }

nav {
  display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
nav a { font-weight: 500; text-decoration: none; }
nav form { margin: 0 0 0 auto; }

main { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
main > *:first-child { margin-top: 0; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin: 1rem 0; box-shadow: var(--shadow-sm); }

form p { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1rem; max-width: 420px; }
form .helptext, form ul.errorlist { font-size: .85rem; color: var(--text-secondary); }
ul.errorlist { color: var(--error); margin: 0; padding-left: 1.1rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-bg); border-color: var(--brand); }
button {
  font: inherit; font-weight: 600; cursor: pointer; padding: .45rem 1rem;
  color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm);
}
button:hover { background: var(--brand-light); }
button:disabled { opacity: .5; cursor: not-allowed; }
nav button { color: var(--brand); background: transparent; }
nav button:hover { color: #fff; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 1rem 0; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); background: var(--bg); }
tr:last-child td { border-bottom: 0; }
td form { display: inline; }

code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em; background: var(--brand-bg); padding: .1em .35em; border-radius: 4px; word-break: break-all; }

p.success, p.info { background: var(--success-bg); color: var(--success); }
p.error, p.warning { background: var(--error-bg); color: var(--error); }
p.success, p.info, p.error, p.warning { max-width: 960px; margin: 1rem auto 0; padding: .65rem 1rem; border-radius: var(--radius-sm); }