/* amplsem, the three-pane workbench (plan 5).
 *
 * No build step and no framework: one stylesheet, custom properties for
 * the palette, and a grid for the layout. Dark first, because the
 * editor and the solver log are what people look at longest, with a
 * light theme and a toggle that is remembered.
 */

:root {
    color-scheme: dark;

    --bg:          #0e1116;
    --bg-raised:   #151a21;
    --bg-inset:    #0a0d11;
    --bg-hover:    #1c232c;
    --border:      #232b35;
    --border-soft: #1a212a;

    --text:        #e6eaf0;
    --text-dim:    #97a3b4;
    --text-faint:  #63707f;

    --accent:      #7c8cff;
    --accent-dim:  #5766d6;
    --accent-wash: #7c8cff1a;

    --ok:          #3fb950;
    --warn:        #d29922;
    --bad:         #f85149;
    --info:        #58a6ff;

    --ok-wash:     #3fb9501a;
    --warn-wash:   #d299221a;
    --bad-wash:    #f851491a;

    --radius:      10px;
    --radius-sm:   7px;
    --gap:         14px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
            "Cascadia Code", monospace;

    --shadow: 0 1px 2px #0006, 0 8px 24px #0000004d;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg:          #f6f7f9;
    --bg-raised:   #ffffff;
    --bg-inset:    #eef0f4;
    --bg-hover:    #e9ecf1;
    --border:      #dde1e8;
    --border-soft: #e8ebf0;

    --text:        #10151c;
    --text-dim:    #57616f;
    --text-faint:  #8a95a3;

    --accent:      #4a5bd6;
    --accent-dim:  #3d4cb8;
    --accent-wash: #4a5bd614;

    --ok:          #1a7f37;
    --warn:        #9a6700;
    --bad:         #cf222e;
    --info:        #0969da;

    --ok-wash:     #1a7f3714;
    --warn-wash:   #9a670014;
    --bad-wash:    #cf222e14;

    --shadow: 0 1px 2px #0000000f, 0 6px 20px #0000000a;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- header ---------- */

.top {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 0 16px;
    height: 52px;
    flex: none;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-weight: 640;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.brand .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-wash);
}

.brand small {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 12px;
}

.spacer { flex: 1; }

.meter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    padding: 5px 11px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
}

.meter b { color: var(--text); font-variant-numeric: tabular-nums; }

.pips { display: flex; gap: 3px; }

.pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.pip.spent { background: var(--border); }

/* ---------- generic controls ---------- */

button, .btn {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .06s;
}

button:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--text-faint);
}

button:active:not(:disabled) { transform: translateY(1px); }

button:disabled { opacity: .45; cursor: not-allowed; }

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 560;
}

button.primary:hover:not(:disabled) { background: var(--accent-dim); }

button.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
    padding: 6px 9px;
}

button.ghost:hover { background: var(--bg-hover); color: var(--text); }

a { color: var(--accent); }

/* ---------- layout ---------- */

.panes {
    flex: 1;
    display: grid;
    /* The chat is the primary input: a student describes a problem in
       words far more often than they paste AMPL, so it gets the room
       and the editor becomes the place the answer lands. */
    grid-template-columns: minmax(360px, 1.35fr) minmax(320px, 1fr)
                           minmax(280px, .85fr);
    gap: 1px;
    background: var(--border);
    min-height: 0;
}

.pane {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.pane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 40px;
    flex: none;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 560;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pane-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ---------- banner ---------- */

.banner {
    padding: 9px 16px;
    font-size: 13px;
    background: var(--warn-wash);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.banner.bad { background: var(--bad-wash); }

/* ---------- chat ---------- */

.thread {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.msg { display: flex; flex-direction: column; gap: 7px; }

.msg-who {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.msg-body {
    background: var(--bg-raised);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 11px 13px;
    overflow-wrap: anywhere;
}

.msg.user .msg-body {
    background: var(--accent-wash);
    border-color: transparent;
}

.msg-body p { margin: 0 0 9px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { margin: 0 0 9px; padding-left: 20px; }
.msg-body li { margin-bottom: 3px; }

.msg-body code {
    font: 12.5px/1.5 var(--mono);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 1px 5px;
}

.msg-body pre {
    margin: 9px 0;
    padding: 11px 12px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.msg-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
}

/* Tables are how an answer reports a solution, so they have to render
   rather than arriving as pipes and dashes. */
.msg-body table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.msg-body th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 5px 12px 5px 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.msg-body td {
    padding: 5px 12px 5px 0;
    border-bottom: 1px solid var(--border-soft);
    font-variant-numeric: tabular-nums;
}

.msg-body td:not(:first-child), .msg-body th:not(:first-child) {
    padding-left: 4px;
}

.msg-body table code { font-size: 12px; }

.empty {
    color: var(--text-faint);
    font-size: 13px;
    padding: 26px 18px;
    text-align: center;
    line-height: 1.7;
}

.empty kbd {
    font: 11px var(--mono);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
}

/* ---------- activity stream (plan 5.4) ---------- */

.steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid var(--border);
    padding-left: 13px;
    margin-left: 4px;
}

.step { font-size: 13px; }

.step-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
}

.step-head:hover { background: var(--bg-hover); border-color: transparent; }

.step-head .label { color: var(--text); flex: 1; }

.step-head .n {
    font: 11px var(--mono);
    color: var(--text-faint);
    min-width: 15px;
}

.kind {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-inset);
    color: var(--text-dim);
    white-space: nowrap;
}

.kind.solving   { background: var(--info);   color: #06121f; }
.kind.diagnosing{ background: var(--warn);   color: #1b1403; }
.kind.retrieving{ background: var(--accent); color: #fff; }
.kind.failed    { background: var(--bad);    color: #fff; }

.step-detail {
    margin: 2px 0 8px 22px;
    padding: 10px 12px;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font: 12px/1.55 var(--mono);
    white-space: pre-wrap;
    overflow-x: auto;
    color: var(--text-dim);
    max-height: 320px;
    overflow-y: auto;
}

.rationale {
    font: italic 12.5px/1.5 var(--font);
    color: var(--text-faint);
    padding: 2px 7px 6px 22px;
}

.working {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.1s ease-in-out infinite;
    flex: none;
}

.working-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 7px;
    font-size: 13px;
    color: var(--text-dim);
}

.working-line .dots::after {
    content: "";
    animation: dots 1.4s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
}

@keyframes pulse {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---------- composer ---------- */

.composer {
    flex: none;
    padding: 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-raised);
}

.composer-row {
    display: flex;
    gap: 9px;
    align-items: flex-end;
}

.composer textarea {
    flex: 1;
    resize: none;
    font: 14px/1.5 var(--font);
    color: var(--text);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    min-height: 40px;
    max-height: 160px;
}

.composer textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.composer .hint {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--text-faint);
}

/* ---------- editor ---------- */

.tabs {
    display: flex;
    gap: 2px;
    margin-right: auto;
}

.tab {
    font: 12px var(--mono);
    text-transform: none;
    letter-spacing: 0;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint);
}

.tab[aria-selected="true"] {
    background: var(--bg-inset);
    border-color: var(--border);
    color: var(--text);
}

.editor-wrap {
    flex: 1;
    display: flex;
    min-height: 0;
    background: var(--bg-inset);
    position: relative;
}

/* The highlight layer sits behind the textarea, which keeps its own
   caret, selection and undo stack. Both use identical metrics and the
   layer is scrolled to match, so the colours stay under the glyphs. */
.highlight {
    position: absolute;
    inset: 0 0 0 0;
    margin-left: var(--gutter-width, 44px);
    padding: 12px 12px 12px 4px;
    font: 12.5px/1.6 var(--mono);
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    color: var(--text);
    tab-size: 4;
}

.editor.overlaid {
    position: relative;
    color: transparent;
    caret-color: var(--text);
    background: transparent;
}

.editor.overlaid::selection { background: var(--accent-wash); }

/* One palette for AMPL, used by the editor and by fenced blocks in an
   answer, so the same token never has two colours. */
.tok-key { color: var(--accent); font-weight: 560; }
.tok-decl { color: var(--info); font-weight: 560; }
.tok-com { color: var(--text-faint); font-style: italic; }
.tok-num { color: var(--ok); }
.tok-str { color: var(--warn); }
.tok-op { color: var(--text-dim); }

.gutter {
    flex: none;
    padding: 12px 8px 12px 12px;
    font: 12.5px/1.6 var(--mono);
    color: var(--text-faint);
    text-align: right;
    user-select: none;
    overflow: hidden;
    background: var(--bg-inset);
}

.editor {
    flex: 1;
    font: 12.5px/1.6 var(--mono);
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    padding: 12px 12px 12px 4px;
    white-space: pre;
    overflow-wrap: normal;
    overflow: auto;
    tab-size: 4;
}

.editor::placeholder { color: var(--text-faint); }

.editor-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-raised);
    font-size: 12px;
    color: var(--text-faint);
}

/* ---------- results ---------- */

.results { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pill {
    font-size: 12px;
    font-weight: 620;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--bg-inset);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.pill.solved     { background: var(--ok-wash);   color: var(--ok);   border-color: transparent; }
.pill.infeasible { background: var(--bad-wash);  color: var(--bad);  border-color: transparent; }
.pill.unbounded  { background: var(--warn-wash); color: var(--warn); border-color: transparent; }

.objective {
    font: 600 26px/1.2 var(--mono);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.objective small {
    display: block;
    font: 400 11.5px/1.4 var(--font);
    color: var(--text-faint);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fact { background: var(--bg-raised); padding: 9px 11px; }

.fact dt {
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.fact dd {
    margin: 0;
    font: 13.5px var(--mono);
    font-variant-numeric: tabular-nums;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.log {
    font: 12px/1.55 var(--mono);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    white-space: pre-wrap;
    overflow-x: auto;
    color: var(--text-dim);
    margin: 0;
}

.problem {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bad-wash);
    color: var(--bad);
    font-size: 13px;
    border: 1px solid transparent;
}

.problem.warn { background: var(--warn-wash); color: var(--warn); }

.select {
    font: 12px var(--mono);
    color: var(--text-dim);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    max-width: 190px;
}

.saved {
    color: var(--ok);
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s;
}

.saved.show { opacity: 1; }

.written {
    margin: 4px 0 10px 22px;
    font-size: 12.5px;
    color: var(--text-dim);
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    background: var(--accent-wash);
    border: 1px solid transparent;
}

.written b { color: var(--text); }

/* ---------- scrollbars ---------- */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 3px solid var(--bg);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- narrow screens ---------- */

.pane-switch { display: none; gap: 2px; }

@media (max-width: 1000px) {
    .panes { grid-template-columns: 1fr; }
    .pane { display: none; }
    .pane.active { display: flex; }
    .pane-switch { display: flex; }
    .meter .label { display: none; }
}