/* Scope board: input pane + board inside one app window. */
.intro { padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.intro h1 { font: 800 clamp(1.7rem, 3.2vw, 2.5rem)/1.25 var(--display); letter-spacing: -.03em; }
.intro p { margin-top: .7rem; max-width: 44em; color: var(--ink-2); font-size: clamp(1rem, 1.3vw, 1.0625rem); }

.app { display: grid; grid-template-columns: minmax(20rem, 23rem) 1fr; min-height: 38rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: clip; }

/* input pane */
.pane-in { display: flex; flex-direction: column; gap: 1.15rem; padding: 1.25rem; background: var(--surface-2); border-right: 1px solid var(--line); }
.f-head { display: flex; align-items: baseline; justify-content: space-between; }
textarea { display: block; width: 100%; min-height: 8.5rem; padding: .8rem .9rem; border: 0; border-radius: var(--radius); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; line-height: 1.6; resize: vertical; transition: box-shadow .15s ease; }
textarea::placeholder { color: var(--ink-3); }
textarea:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt); background: var(--surface); }
.exs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; }
.exs .hint { margin-right: .15rem; font-weight: 600; }
.ex { border: 0; padding: .3rem .65rem; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; color: var(--ink-2); cursor: pointer; }
.ex:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); background: var(--surface); }
.f-row { display: grid; gap: 1.15rem; }
.go { margin-top: auto; display: grid; gap: .6rem; }
.go .btn { width: 100%; }
.kbd-js { display: none; }
.js .kbd-js { display: inline; }

/* output pane */
.pane-out { position: relative; display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.25rem clamp(1rem, 2.2vw, 1.75rem) 0; }
.out-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.out-name { font-weight: 700; font-size: .9375rem; }
.st { display: none; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.st::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
body[data-state="idle"] .st-idle, body[data-state="loading"] .st-loading, body[data-state="streaming"] .st-streaming, body[data-state="done"] .st-done, body[data-state="unclear"] .st-unclear, body[data-state="error"] .st-error { display: inline-flex; }
.st-idle { background: var(--canvas); color: var(--ink-3); }
.st-loading, .st-streaming, .st-unclear { background: var(--amber-soft); color: var(--amber); }
.st-loading::before, .st-streaming::before { animation: pulse .8s var(--ease-out) infinite alternate; }
.st-done { background: var(--green-soft); color: var(--green-text); }
.st-error { background: var(--red-soft); color: var(--red-text); }

.empty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; margin: .5rem 0 2rem; }
.empty div { padding-top: .9rem; border-top: 2px solid var(--line); }
.empty dt { font-weight: 700; font-size: .9375rem; margin-bottom: .3rem; }
.empty dd { margin: 0; color: var(--ink-2); font-size: .9375rem; max-width: 30em; }
.e-flow { border-top-color: var(--ink) !important; }
.e-scope { border-top-color: var(--cobalt) !important; }
.e-parts { border-top-color: var(--green) !important; }
.e-q { border-top-color: var(--ink-3) !important; }
body:not([data-state="idle"]):not([data-state="error"]) .empty, .pane-out:has(#result:not([hidden])) .empty { display: none; }

/* board */
.board { display: grid; gap: 1.4rem; padding-bottom: 1.5rem; }
.b-head { display: grid; gap: .45rem; }
.b-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.b-flow .d-flow li { grid-template-columns: 1.2rem 3.3rem 1fr; }
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sc { padding: .85rem; border-radius: 14px; background: var(--canvas); }
.sc.s-first { background: var(--cobalt-soft); }
.sc h3 { display: flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 700; margin-bottom: .6rem; }
.s-first h3 { color: var(--cobalt-2); }
.cnt { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--ink-3); }
.s-first .cnt { color: var(--cobalt); }
.sc-list { display: grid; gap: .4rem; }
.sc-text { min-width: 0; overflow-wrap: break-word; }
.sc-list li { display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .55rem .55rem .7rem; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: .9375rem; line-height: 1.45; }
.sc-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.s-first .sc-dot { background: var(--cobalt); }
.sc-list .sc-empty { display: block; padding: .7rem; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); box-shadow: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; color: var(--ink-3); font-size: .8125rem; text-align: center; }
.mv { display: inline-flex; align-items: center; gap: .3rem; border: 0; padding: .3rem .5rem; border-radius: 8px; background: transparent; font-size: .75rem; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.mv .ico { width: .9rem; height: .9rem; }
.mv:hover { background: var(--canvas); color: var(--ink); }
.s-notNow .mv { flex-direction: row-reverse; }
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.b-side .s-questions { padding: .9rem 1rem; border-radius: 14px; background: var(--canvas); }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: var(--ease-out); }

.pane-out .actions { position: sticky; bottom: 0; margin: auto calc(-1 * clamp(1rem, 2.2vw, 1.75rem)) 0; padding: .8rem clamp(1rem, 2.2vw, 1.75rem); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.pane-out .actions .btn-primary { margin-left: auto; }

@media (max-width: 1180px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .pane-in { border-right: 0; border-bottom: 1px solid var(--line); }
  .f-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .b-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .f-row, .scope, .parts, .empty { grid-template-columns: 1fr; }
}
@media print {
  .intro, .pane-in, .out-bar, .empty { display: none !important; }
  .app { display: block; box-shadow: none; }
  .mv { display: none; }
  .b-grid { grid-template-columns: 1fr; }
}