calculation-breakdown 0.0.0-stage → 0.1.1

package/docs/playground/playground.css

@@ -0,0 +1,374 @@
+:root {
+    color-scheme: dark;
+    --canvas: #11110f;
+    --panel: #191916;
+    --panel-raised: #20201c;
+    --line: #35352e;
+    --muted: #96968a;
+    --text: #f3f1e8;
+    --accent: #d9ff57;
+    --danger: #ff806d;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html,
+body {
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--canvas);
+    color: var(--text);
+}
+
+.topbar {
+    flex: 0 0 auto;
+    min-height: 68px;
+    padding: 12px 18px;
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.brand {
+    color: var(--text);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 15px;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.badge {
+    margin-left: 10px;
+    padding: 3px 7px;
+    border: 1px solid #55651f;
+    border-radius: 999px;
+    color: var(--accent);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: .08em;
+}
+
+.actions,
+.locale-control {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+}
+
+.locale-control { color: var(--muted); font-size: 12px; }
+
+select,
+.button {
+    height: 36px;
+    border: 1px solid var(--line);
+    border-radius: 7px;
+    font: inherit;
+}
+
+select {
+    padding: 0 30px 0 10px;
+    background: var(--panel);
+    color: var(--text);
+}
+
+.button {
+    padding: 0 14px;
+    background: var(--accent);
+    color: #181a0c;
+    font-size: 13px;
+    font-weight: 750;
+    cursor: pointer;
+}
+
+.button:hover { filter: brightness(1.08); }
+.button-secondary { background: transparent; color: var(--text); }
+
+.workspace {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(280px, .92fr) minmax(260px, .72fr) minmax(360px, 1.25fr);
+}
+
+.panel {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--line);
+}
+
+.panel:last-child { border-right: 0; }
+
+.panel-heading {
+    min-height: 50px;
+    padding: 0 14px;
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    color: var(--muted);
+    font-size: 11px;
+    letter-spacing: .04em;
+}
+
+.panel-heading > div { display: flex; align-items: center; gap: 9px; }
+.panel-heading-meta { justify-content: flex-end; text-align: right; }
+.panel-heading h1, .panel-heading h2 { margin: 0; color: var(--text); font-size: 13px; }
+.step { color: var(--accent); font-family: ui-monospace, monospace; }
+
+.code-editor {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--panel);
+}
+
+textarea,
+.code-highlight {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    resize: none;
+    border: 0;
+    outline: 0;
+    padding: 18px;
+    overflow: auto;
+    white-space: pre;
+    overflow-wrap: normal;
+    font: 13px/21px Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-synthesis: none;
+    font-variant-ligatures: none;
+    letter-spacing: 0;
+    word-spacing: 0;
+    text-indent: 0;
+    tab-size: 2;
+}
+
+.code-highlight {
+    pointer-events: none;
+    overflow: hidden;
+    color: #d7d7c8;
+}
+
+#builder {
+    overflow-x: scroll;
+    overflow-y: auto;
+}
+
+textarea {
+    z-index: 1;
+    background: transparent;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    caret-color: var(--accent);
+}
+
+textarea::selection {
+    background: rgba(123, 148, 54, .42);
+    -webkit-text-fill-color: transparent;
+}
+
+textarea:focus { box-shadow: inset 0 0 0 1px #596927; }
+
+.code-editor:focus-within .code-highlight {
+    visibility: hidden;
+}
+
+.code-editor textarea:focus {
+    color: #d7d7c8;
+    -webkit-text-fill-color: #d7d7c8;
+}
+
+.token-comment { color: #707568; }
+.token-keyword, .token-atrule { color: #d780f5; }
+.token-string { color: #b7d77a; }
+.token-number, .token-color { color: #f2a65a; }
+.token-function { color: #78c7f2; }
+.token-property { color: #7bd8c4; }
+.token-selector { color: #f1d17b; }
+.preview-panel { background: #151513; }
+
+.preview-stage {
+    flex: 1;
+    min-height: 0;
+    padding: clamp(20px, 4vw, 54px);
+    display: grid;
+    place-items: start center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-image: radial-gradient(#34342e 1px, transparent 1px);
+    background-size: 18px 18px;
+}
+
+.preview-list {
+    width: min(100%, 620px);
+    min-width: 0;
+    display: grid;
+    gap: 24px;
+}
+
+.calculation-card {
+    position: relative;
+    width: min(100%, 560px);
+    min-width: 0;
+    justify-self: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 30px;
+    border: 1px solid #d9dfc2;
+    border-radius: 18px;
+    background: #f7f8f1;
+    color: #1c2114;
+    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
+    font-family: Inter, system-ui, sans-serif;
+}
+
+.calculation-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 14px;
+}
+
+.calculation-card__eyebrow {
+    margin: 0;
+    color: #637236;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+}
+
+.card-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 9px;
+    margin-bottom: 18px;
+}
+
+.language-switcher,
+.view-switcher {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 3px;
+    border: 1px solid #d4d9c5;
+    border-radius: 999px;
+    background: #e9ecdf;
+}
+
+.view-switcher {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.language-switcher button,
+.view-switcher button {
+    min-width: 34px;
+    padding: 5px 8px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: #747966;
+    font: 800 10px/1 ui-monospace, monospace;
+    cursor: pointer;
+}
+
+.language-switcher button[aria-pressed="true"],
+.view-switcher button[aria-pressed="true"] {
+    background: #1c2114;
+    color: #f7f8f1;
+}
+
+.calculation-card__meta {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+    margin: 26px 0 0;
+}
+
+.calculation-card__meta div {
+    padding-top: 12px;
+    border-top: 1px solid #d9dfc2;
+}
+
+.calculation-card__meta dt {
+    color: #6b705f;
+    font-size: 11px;
+    text-transform: uppercase;
+}
+
+.calculation-card__meta dd {
+    margin: 5px 0 0;
+    font: 600 13px ui-monospace, monospace;
+}
+
+.calculation-card__command {
+    display: block;
+    margin-bottom: 14px;
+    color: #6b705f;
+    font: 11px/1.5 ui-monospace, monospace;
+    white-space: nowrap;
+}
+
+.calculation-card__command[hidden] { display: none; }
+
+.calculation-card__json { margin-top: 24px; }
+.calculation-card__json summary { cursor: pointer; font-size: 13px; }
+.calculation-card__json pre {
+    max-height: 240px;
+    overflow: auto;
+    padding: 14px;
+    border-radius: 9px;
+    background: #e9ecdf;
+    font: 11px/1.5 ui-monospace, monospace;
+}
+
+.preview-error {
+    width: min(100%, 560px);
+    padding: 18px;
+    border: 1px solid #693b33;
+    border-radius: 10px;
+    background: #291b18;
+    color: var(--danger);
+    font: 13px/1.55 ui-monospace, monospace;
+    white-space: pre-wrap;
+}
+
+#status[data-state="error"] { color: var(--danger); }
+#status[data-state="success"] { color: var(--accent); }
+
+@media (max-width: 980px) {
+    .workspace {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: repeat(2, minmax(0, 1fr));
+    }
+    .preview-panel { grid-column: 1 / -1; }
+}
+
+@media (max-width: 650px) {
+    .topbar { align-items: flex-start; flex-direction: column; }
+    .actions { width: 100%; flex-wrap: wrap; }
+    .workspace {
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(3, minmax(0, 1fr));
+    }
+    .preview-panel { grid-column: auto; }
+    .panel { border-right: 0; border-bottom: 1px solid var(--line); }
+}