/* Synthcore light theme + layout (local modification; replaces upstream SMS2 stylesheet).
   Palette from design.png: white | near-black #1d1d1f | green #2e9e6b / #57cd8f |
   hairlines #e5e5e5 | muted #8a8a8a. Layout classes (sc-*) are built by
   scripts/synthcore-layout.js. */

/* --- base ------------------------------------------------------------- */
html {
  background: #ffffff;
}
body, body.main {
  background: #ffffff;
  color: #1d1d1f;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
a { color: #2e9e6b; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- grid layout (built by the shim) ----------------------------------- */
#sc-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "head    head"
    "nav     desc"
    "main    desc"
    "results results"
    "foot    foot";
  column-gap: 3rem;
  align-content: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.2rem 2.5rem 3rem;
}
#sc-app.sc-noform {
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "nav  main"
    "foot foot";
}

.sc-head { grid-area: head; border-bottom: 1px solid #e5e5e5; padding-bottom: 1.1rem; margin-bottom: 1.8rem; }
.sc-kicker {
  color: #2e9e6b;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.35rem;
}
.sc-title {
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
}

.sc-panel-label {
  color: #8a8a8a;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.3rem;
  margin-bottom: 0.7rem;
}

/* toolbox - top left */
.sc-nav { grid-area: nav; margin-bottom: 1.6rem; }
.sc-nav-body center { display: none; }

/* tool selector: one select box, one optgroup per section */
.sc-select {
  width: 100%;
  max-width: 420px;
  font-family: inherit;
  font-size: 0.88rem;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
}
.sc-select:focus { outline: 2px solid #57cd8f; outline-offset: 0; }
.sc-select optgroup { color: #2e9e6b; font-style: normal; }
.sc-select option { color: #1d1d1f; }

a.sc-kicker { display: inline-block; text-decoration: none; }
a.sc-kicker:hover { text-decoration: underline; }

.sc-footlinks { font-size: 0.72rem; margin-bottom: 0.3rem; }
.sc-footlinks a { color: #2e9e6b; }
.sc-footnote { color: #a0a0a0; font-size: 0.72rem; }

/* input area - left, under the toolbox */
.sc-main { grid-area: main; min-width: 0; }

/* description - right column */
.sc-desc {
  grid-area: desc;
  border-left: 1px solid #e5e5e5;
  padding-left: 1.6rem;
  font-size: 0.88rem;
  color: #4a4a4a;
}

/* results - bottom, full width */
.sc-results { grid-area: results; margin-top: 2.2rem; }
#sc-results-body {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  min-height: 140px;
  background: #ffffff;
}
.sc-placeholder { color: #b3b3b3; padding: 3rem 0; text-align: center; font-size: 0.85rem; }
.sc-results-frame { display: block; width: 100%; height: 440px; border: 0; }

.sc-foot { grid-area: foot; margin-top: 2.5rem; border-top: 1px solid #e5e5e5; padding-top: 0.8rem; }

@media (max-width: 900px) {
  #sc-app, #sc-app.sc-noform {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "nav" "desc" "main" "results" "foot";
    padding: 1.2rem;
  }
  .sc-desc { border-left: 0; padding-left: 0; }
}

/* --- upstream SMS2 classes, restyled ----------------------------------- */
td.links, td.program, td.description, td.title, td.sms {
  background: #ffffff;
  color: #1d1d1f;
  font-family: inherit;
  vertical-align: top;
}
td.sms { font-size: 0.8rem; color: #2e9e6b; }
td.title { font-size: 1.3rem; color: #1d1d1f; }

div.linkTitle, div.programTitle, div.title {
  background-color: transparent;
  color: #1d1d1f;
  text-align: left;
  font-size: 1.1rem;
}
div.category {
  background-color: transparent;
  color: #2e9e6b;
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.8em;
  padding-bottom: 0.15em;
  break-after: avoid;
}
div.code_title, p.code_title { color: #4a4a4a; font-style: normal; font-size: 0.9rem; }

div.program, div.program a, div.program a:visited, div.program a:active {
  font-size: 0.8rem;
  color: #1d1d1f;
  text-decoration: none;
  line-height: 1.75;
}
div.program a:hover { color: #2e9e6b; text-decoration: underline; }

td.description a, td.description a:visited, td.description a:active,
.sc-desc a, .sc-desc a:visited {
  color: #2e9e6b;
  background: transparent;
  text-decoration: none;
}
td.description a:hover, .sc-desc a:hover { text-decoration: underline; }

p.pre, p.pre_small, p.pre_bold, div.pre, div.pre_small {
  color: #1d1d1f;
  font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
  white-space: pre;
  font-size: 0.8rem;
}
div.warning { color: #c0563e; font-size: 0.85rem; }
div.copyright, span.version, span.valid { color: #a0a0a0; font-size: 0.72rem; }

div.sms3_notice {
  margin: 0 0 1em 0;
  padding: 0.55em 0.8em;
  border: 1px solid #cdeeda;
  border-radius: 4px;
  color: #35634d;
  background-color: #f0faf4;
  font-size: 0.8rem;
}
div.sms3_notice a { color: #2e9e6b; }

/* --- forms -------------------------------------------------------------- */
form { font-size: 0.88rem; color: #4a4a4a; }
form ul { padding-left: 1.2rem; }
form li { margin: 0.25rem 0; }

textarea {
  font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
  font-size: 0.8rem;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 130px;
  margin: 0.5rem 0;
}
input[type="text"], select {
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-family: inherit;
  font-size: 0.85rem;
}
textarea:focus, input:focus, select:focus { outline: 2px solid #57cd8f; outline-offset: 0; }

input[type="button"], input[type="submit"], input[type="reset"], button {
  font-family: inherit;
  font-size: 0.82rem;
  color: #1d1d1f;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0.35rem 1.1rem;
  margin: 0.3rem 0.5rem 0.3rem 0;
  cursor: pointer;
}
input[name="main_submit"], input[type="submit"] {
  background: #57cd8f;
  border-color: #57cd8f;
  color: #ffffff;
}
input[name="main_submit"]:hover, input[type="submit"]:hover { background: #45bd7f; }
input[type="button"]:hover, input[type="reset"]:hover, button:hover { border-color: #57cd8f; }
input[type="checkbox"], input[type="radio"] { accent-color: #2e9e6b; }