/* Hallmark · macrostructure: Workbench · tone: calm utility · anchor hue: blue */
@import url('/tokens.css?v=7');
.chart-view-switch, .jc-calculator { display: none !important; }
.center-panel.has-example .paper-sheet > * { visibility: hidden !important; }
.center-panel.has-example .preview-meta, .center-panel.has-example .chart-tools { visibility: hidden !important; }
.empty-data, #mh-formula { display: none !important; }
.control-group h3 { font-size: 1rem; line-height: 1.4; }
.setting-label, .setting label, .mh-setting, .jc-studio .setting { font-size: var(--text-caption); }
.help-text, .hint, .mh-hint, .chart-status, .point-info { font-size: var(--text-caption); }
#mh-normalize { margin-top: 0; border-top: 0; padding-top: 0; }
#mh-normalize h3 { margin: 0 0 13px; }
.mh-setting { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; color: var(--color-ink-soft); font-size: var(--text-caption); font-weight: 600; }
.mh-setting input, .mh-setting select { width: 100%; min-height: 38px; box-sizing: border-box; border: var(--rule-thin) solid var(--color-rule); border-radius: 10px; padding: 7px 10px; background: var(--color-surface-raised); color: var(--color-ink); font: inherit; font-weight: 500; }
.mh-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 9px; }
#mh-normalize[data-mode="geometry"] #mh-v, #mh-normalize[data-mode="geometry"] #mh-v + * { opacity: .55; }
#mh-normalize[data-mode="volume"] .mh-field-grid, #mh-normalize[data-mode="ready"] .mh-field-grid, #mh-normalize[data-mode="ready"] .mh-setting:has(#mh-v) { opacity: .55; }
.mh-hint, .mh-status { margin: 5px 0 0; color: var(--color-muted); font-size: .76rem; line-height: 1.55; }
.mh-status { min-height: 1.2em; color: var(--color-accent); }
.mh-status[data-error="true"] { color: #b34732; }

html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-ui); font-size: var(--text-body); }
.studio { min-height: 100vh; max-width: 1500px; margin: 0 auto; padding: 20px clamp(16px, 3.4vw, 48px) 48px; background: transparent; }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 18px; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-float); background: var(--color-glass); box-shadow: var(--shadow-float); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: var(--text-item); letter-spacing: -.015em; }
.brand strong { font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--color-ink); color: var(--color-surface-raised); box-shadow: none; }
.privacy-pill { color: var(--color-ink-soft); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0; border: 0; background: transparent; padding: 0; }
.privacy-pill::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--color-success); vertical-align: 1px; }
.page-navigation { position: absolute; z-index: 4; top: 27px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; width: max-content; margin: 0; padding: 5px; border: var(--rule-thin) solid var(--color-rule); border-radius: 14px; background: var(--color-paper-soft); box-shadow: inset 0 1px 1px oklch(20% .02 255 / .04); }
.page-navigation a { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; padding: 0 16px; border-radius: 10px; color: var(--color-ink-soft); font-size: var(--text-caption); font-weight: 650; text-decoration: none; white-space: nowrap; transition: background var(--dur-standard) var(--ease-out), color var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) var(--ease-out); }
.page-navigation a:hover { background: var(--color-surface-raised); color: var(--color-ink); }
.page-navigation a[aria-current="page"] { color: var(--color-accent); background: var(--color-surface-raised); box-shadow: 0 1px 5px oklch(20% .02 255 / .1); }
.page-navigation a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.workspace { display: grid; grid-template-columns: minmax(238px, 280px) minmax(0, 1fr) minmax(250px, 292px); gap: 16px; margin-top: 42px; min-height: 0; align-items: start; background: transparent; }
.left-panel, .center-panel, .right-panel { min-width: 0; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.left-panel, .right-panel { padding: 22px; }
.center-panel { padding: 22px; background: var(--color-surface); }
.section-heading, .right-heading, .preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 0; border: 0; }
.section-heading h1, .right-heading h2, .preview-header h2 { margin: 0; color: var(--color-ink); font-size: var(--text-section); font-weight: 700; letter-spacing: -.025em; }
.preview-header h2 { font-size: var(--text-title); }
.preview-meta { color: var(--color-muted); font-size: var(--text-caption); }
.upload-card { border: var(--rule-thin) dashed var(--color-rule-strong); border-radius: 14px; padding: 24px 14px; background: var(--color-paper); }
.upload-card strong { font-size: var(--text-body); }
.upload-card p, .empty-data, .panel-subtitle { color: var(--color-muted); font-size: var(--text-caption); }
.upload-icon { background: var(--color-accent-soft); color: var(--color-accent); box-shadow: none; }
.upload-button, .primary-button, button[data-variant="default"] { background: var(--color-ink); border-radius: var(--radius-control); box-shadow: none; color: var(--color-surface-raised); }
.upload-button:hover, .primary-button:hover, button[data-variant="default"]:hover { background: var(--color-accent-hover); }
.text-button { color: var(--color-accent); }
.panel-subtitle { padding-top: 16px; border-top: var(--rule-thin) solid var(--color-rule); }
.paper-stage { border: 0; border-radius: 14px; padding: clamp(12px, 2vw, 24px); background: var(--color-paper-soft); box-shadow: none; }
.paper-sheet { max-width: 100%; border: var(--rule-thin) solid var(--color-rule); box-shadow: 0 8px 24px oklch(20% .02 255 / .08); }
.chart-tools { border: var(--rule-thin) solid var(--color-rule); border-radius: 10px; background: var(--color-surface-raised); box-shadow: 0 2px 8px oklch(20% .02 255 / .08); }
.chart-tools button { border-radius: 8px; }
.chart-tools button[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-accent); }
.control-group { border-top: var(--rule-thin) solid var(--color-rule); padding-top: 20px; margin-top: 20px; }
.control-group h3 { font-size: var(--text-caption); font-weight: 700; color: var(--color-ink); }
.setting-label, .setting label { font-size: var(--text-caption); color: var(--color-ink-soft); }
.setting input, .setting select, .setting button[role="combobox"], .right-panel input[type="text"], .right-panel input[type="number"] { border: var(--rule-thin) solid var(--color-rule); border-radius: 10px; background: var(--color-surface-raised); color: var(--color-ink); }
.export-actions button, .right-panel button { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-standard) var(--ease-out); }
.export-actions button:active, .right-panel button:active { transform: translateY(1px); }
.site-note { margin: 18px auto 0; color: var(--color-muted); font-size: var(--text-caption); text-align: center; }
@media (max-width: 1100px) { .workspace { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); } .right-panel { grid-column: 1 / -1; } }
@media (max-width: 760px) { .studio { padding: 12px 12px 32px; } .topbar { min-height: 56px; padding: 0 12px; border-radius: 16px; } .brand { font-size: .9rem; } .brand-mark { width: 34px; height: 34px; } .privacy-pill { font-size: .7rem; } .page-navigation { position: relative; top: auto; left: auto; transform: none; margin: 14px 0 0; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); } .page-navigation a { min-width: 0; padding: 0 5px; font-size: .82rem; } .workspace { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .left-panel, .center-panel, .right-panel { width: 100%; box-sizing: border-box; } .center-panel { order: 0; } .left-panel { order: 1; } .right-panel { order: 2; } .left-panel, .right-panel, .center-panel { padding: 16px; } .paper-stage { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Compact controls across M–T, M–H, Jc and XRD. */
.section-heading h1, .right-heading h2, .preview-header h2 { font-size: 1.375rem; line-height: 1.35; font-weight: 700; }
details.control-group { display: block; margin: 0; padding: 0; border-top: var(--rule-thin) solid var(--color-rule); }
details.control-group:first-of-type, #mh-normalize { border-top: 0; }
details.control-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 14px 0; list-style: none; cursor: pointer; color: var(--color-ink); font-size: 1rem; font-weight: 700; line-height: 1.35; }
details.control-group > summary::-webkit-details-marker { display: none; }
details.control-group > summary::after { content: ''; width: 8px; height: 8px; margin: 0 4px 3px 10px; flex: 0 0 auto; border-right: 1.8px solid var(--color-ink-soft); border-bottom: 1.8px solid var(--color-ink-soft); transform: rotate(45deg); transition: transform 160ms ease; }
details.control-group[open] > summary::after { transform: rotate(225deg); margin-top: 7px; }
details.control-group[open] { padding-bottom: 18px; }
.axis-range { margin: 2px 0 14px; }
.axis-range .setting { min-width: 0; }
.point-info:empty, .chart-status:empty { display: none; }
.jc-studio .control-group > summary { font-size: 1rem; }
.shape-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.shape-choices button { display: grid; place-items: center; min-width: 0; width: 100%; aspect-ratio: 1; padding: 3px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface-raised); cursor: pointer; }
.shape-choices button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.shape-choices svg { display: block; width: 21px; height: 21px; }