:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #f3f2ed;
  background: #11110f;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: #11110f; }
header { padding: clamp(2rem, 5vw, 5rem); border-bottom: 1px solid #34332e; position: relative; }
.eyebrow { color: #9e9c90; letter-spacing: .16em; font: 600 .72rem ui-monospace, monospace; }
h1 { margin: .35rem 0 0; font-size: clamp(2.5rem, 8vw, 6.5rem); letter-spacing: -.065em; line-height: .9; font-weight: 580; }
.connection { position: absolute; top: 2rem; right: clamp(2rem, 5vw, 5rem); color: #d6a85f; font-size: .8rem; }
.connection[data-connected="true"] { color: #72c789; }
.watcher-status { margin: 1.25rem 0 0; color: #77756b; font: .75rem ui-monospace, monospace; }
.session-actions { position: absolute; top: 4.25rem; right: clamp(2rem, 5vw, 5rem); display: flex; gap: .9rem; align-items: center; color: #9e9c90; font: .72rem ui-monospace, monospace; }
.text-button { border: 0; padding: 0; background: transparent; color: #d6a85f; font: inherit; cursor: pointer; }
.text-button:hover { color: #f3f2ed; }
main { display: grid; grid-template-columns: minmax(17rem, 32rem) 1fr; min-height: 65vh; }
section { padding: clamp(1.5rem, 4vw, 3.5rem); min-width: 0; }
section + section { border-left: 1px solid #34332e; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; color: #9e9c90; }
h2 { margin: 0; color: #f3f2ed; font-size: 1rem; font-weight: 560; }
ol { list-style: none; margin: 0; padding: 0; }
.jobs { display: grid; gap: .5rem; }
.job { width: 100%; border: 1px solid #34332e; background: transparent; color: inherit; padding: 1rem; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; cursor: pointer; }
.job:hover, .job.selected { border-color: #8d8a7d; background: #1a1a17; }
.job > span { color: #9e9c90; overflow: hidden; text-overflow: ellipsis; font: .75rem ui-monospace, monospace; }
.job > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #d6a85f; font-size: .72rem; }
.job[data-state="succeeded"] > strong { color: #72c789; }
.job[data-state="failed"] > strong { color: #e1736e; }
.empty { color: #77756b; padding: 1rem 0; }
.job-meta { padding: 1rem; border: 1px solid #34332e; font: .78rem ui-monospace, monospace; overflow-wrap: anywhere; }
.events { margin-top: 1rem; display: grid; }
.event { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid #292824; }
.event > span { color: #66645c; font: .72rem ui-monospace, monospace; }
.event strong { font: 600 .75rem ui-monospace, monospace; color: #b3b0a4; }
.event p { margin: .45rem 0 0; color: #e4e2da; white-space: pre-wrap; overflow-wrap: anywhere; }
.event.error strong { color: #e1736e; }
.event.tool strong { color: #80a9d1; }

.onboarding { display: block; min-height: auto; width: min(100%, 52rem); padding: clamp(2rem, 5vw, 5rem); }
.setup-panel { padding: 0; }
.onboarding section + section { border: 0; }
.setup-panel h2 { max-width: 12ch; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; line-height: .95; font-weight: 560; }
.step { margin: 0 0 1.25rem; color: #d6a85f; letter-spacing: .14em; font: 600 .68rem ui-monospace, monospace; }
.lede { max-width: 42rem; margin: 1.25rem 0 2.5rem; color: #9e9c90; line-height: 1.6; }
code { color: #d4d1c6; font: .85em ui-monospace, monospace; }
form { display: grid; gap: 1rem; max-width: 38rem; }
label { display: grid; gap: .5rem; color: #b3b0a4; font-size: .78rem; }
label span { color: #77756b; }
input, select { width: 100%; min-height: 3.25rem; border: 1px solid #45433c; border-radius: 0; padding: .8rem .9rem; background: #171714; color: #f3f2ed; font: inherit; outline: none; }
input:focus, select:focus { border-color: #d6a85f; }
form > button, fieldset + button { min-height: 3.25rem; border: 1px solid #d6a85f; padding: .8rem 1rem; background: #d6a85f; color: #11110f; font-weight: 650; cursor: pointer; }
form > button:hover, fieldset + button:hover { background: #e3bb7b; }
.secondary-button { border-color: #45433c; background: transparent; color: #d4d1c6; }
.secondary-button:hover { background: #1a1a17; }
fieldset { display: grid; gap: 1rem; margin: 0; border: 1px solid #34332e; padding: 1.25rem; }
legend { padding: 0 .5rem; color: #f3f2ed; font-size: .85rem; }
.configuration-status { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }
.configuration-status span { border: 1px solid #4d332f; padding: .45rem .65rem; color: #e1736e; font: .7rem ui-monospace, monospace; }
.configuration-status span[data-configured="true"] { border-color: #31543b; color: #72c789; }
.form-message { min-height: 1.25rem; margin: 1.25rem 0 0; color: #72c789; font-size: .8rem; }
.form-message[data-error="true"] { color: #e1736e; }

@media (max-width: 760px) {
  header { padding-top: 4rem; }
  .connection { left: 1.5rem; right: auto; top: 1.5rem; }
  .session-actions { position: static; margin-top: 1.25rem; flex-wrap: wrap; }
  main { grid-template-columns: 1fr; }
  section + section { border-left: 0; border-top: 1px solid #34332e; }
}