/** * Everroux Engineering Workspace — Display Density tokens & layout utilities. * Include after brand/theme tokens (everroux-standard-ui.css or app-shell CSS). * * Modes: comfort | compact | ultra (default) * Set via data-density on or .everroux-app / .app root. * Persisted by everroux-density.js → localStorage key everrouxDensity. * * Component gate: (1) max info without scroll (2) min mouse travel (3) fewest clicks. */ /* ——— Palette aliases (bridge Branding/product ↔ shell short names) ——— */ :root { --er-engineering-blue: var(--blue, #1f4e79); --er-construction-copper: var(--copper, #d97706); --er-slate-gray: var(--slate, var(--muted, #4f5b66)); --er-sage: var(--ee-sage, #547d63); --er-wood: var(--wood, #8b7355); --er-light-gray: var(--light-gray, #e6e8eb); --er-dark-slate: var(--dark-slate, #2d3436); /* Layout borders — defined here so density-only loads still resolve */ --ui-border-subtle: #d8ded9; --ui-border-panel: var(--border, #c5ccc6); --ui-divider: var(--border, #c5ccc6); } .app--dark, [data-theme="dark"] { --ui-border-subtle: #3d4549; --ui-border-panel: var(--border, #4f5b66); --ui-divider: var(--border, #4f5b66); } /* ——— Ultra Compact defaults (also :root fallback) ——— */ :root, [data-density="ultra"], .er-density-ultra { --er-density: ultra; /* Ultra default: use panel-strength edges for clearer section definition */ --ui-border-subtle: var(--border, #c5ccc6); --er-input-height: 26px; --er-btn-height: 26px; --er-section-header-height: 24px; --er-section-pad: 6px; --er-card-pad: 6px; --er-page-margin: 8px; --er-section-gap: 8px; --er-label-gap: 2px; --er-grid-gap: 4px; --er-field-num-compact: 64px; --er-field-num-width: 80px; --er-field-num-long: 112px; --er-field-select-min: 10.5rem; --er-field-text-min: 12rem; --er-eng-col-min: 16rem; --er-radius-dense: 3px; --er-dialog-pad: 8px; --er-control-gap: 4px; --er-space-1: 2px; --er-space-2: 4px; --er-space-3: 4px; --er-space-4: 6px; --er-space-5: 8px; --er-space-6: 8px; /* Desktop workspace outer gutter — does not change with density. */ --er-workspace-gutter: 12px; --er-layout-reading-max: 42rem; --er-layout-web-max: 1600px; --er-header-pad-y: 0.28rem; --er-header-pad-x: 0.75rem; --er-header-logo: 26px; --er-header-border: 2px; --er-tab-pad-y: 0.28rem; --er-tab-pad-x: 0.6rem; --er-table-cell-y: 0.15rem; --er-table-cell-x: 0.35rem; --er-graphics-min-h: 120px; --er-type-app-title: 18px; --er-type-section: 12px; --er-type-subhead: 12px; --er-type-label: 11px; --er-type-value: 12px; --er-type-result: 12px; --er-type-table: 11px; --er-type-note: 11px; --er-type-fine: 10px; --er-type-unit: 10px; } [data-density="compact"], .er-density-compact { --er-density: compact; --ui-border-subtle: #d8ded9; --er-input-height: 30px; --er-btn-height: 30px; --er-section-header-height: 28px; --er-section-pad: 8px; --er-card-pad: 8px; --er-page-margin: 12px; --er-section-gap: 10px; --er-label-gap: 2px; --er-grid-gap: 6px; --er-field-num-compact: 72px; --er-field-num-width: 88px; --er-field-num-long: 120px; --er-field-select-min: 11rem; --er-field-text-min: 12rem; --er-eng-col-min: 17rem; --er-radius-dense: 3px; --er-dialog-pad: 10px; --er-control-gap: 4px; --er-header-pad-y: 0.4rem; --er-header-pad-x: 0.85rem; --er-header-logo: 28px; --er-header-border: 2px; --er-tab-pad-y: 0.36rem; --er-tab-pad-x: 0.7rem; --er-table-cell-y: 0.25rem; --er-table-cell-x: 0.45rem; --er-graphics-min-h: 140px; --er-space-1: 2px; --er-space-2: 4px; --er-space-3: 6px; --er-space-4: 8px; --er-space-5: 10px; --er-space-6: 12px; --er-type-app-title: 20px; --er-type-section: 13px; --er-type-subhead: 13px; --er-type-label: 12px; --er-type-value: 13px; --er-type-result: 13px; --er-type-table: 12px; --er-type-note: 12px; --er-type-fine: 11px; --er-type-unit: 11px; } [data-density="comfort"], .er-density-comfort { --er-density: comfort; --ui-border-subtle: #d8ded9; --er-input-height: 36px; --er-btn-height: 36px; --er-section-header-height: 32px; --er-section-pad: 12px; --er-card-pad: 12px; --er-page-margin: 12px; --er-section-gap: 12px; --er-label-gap: 4px; --er-grid-gap: 10px; --er-field-num-compact: 80px; --er-field-num-width: 100px; --er-field-num-long: 136px; --er-field-select-min: 12rem; --er-field-text-min: 14rem; --er-eng-col-min: 18rem; --er-dialog-pad: 12px; --er-control-gap: 6px; --er-header-pad-y: 0.55rem; --er-header-pad-x: 1rem; --er-header-logo: 32px; --er-header-border: 3px; --er-tab-pad-y: 0.45rem; --er-tab-pad-x: 0.8rem; --er-table-cell-y: 0.4rem; --er-table-cell-x: 0.6rem; --er-graphics-min-h: 160px; --er-space-1: 2px; --er-space-2: 4px; --er-space-3: 10px; --er-space-4: 12px; --er-space-5: 12px; --er-space-6: 12px; --er-type-app-title: 22px; --er-type-section: 14px; --er-type-subhead: 13px; --er-type-label: 12px; --er-type-value: 14px; --er-type-result: 14px; --er-type-table: 13px; --er-type-note: 12px; --er-type-fine: 11px; --er-type-unit: 11px; } /* ——— Typography utilities (forms / chrome) ——— */ .er-section-title { margin: 0; font-size: var(--er-type-section); font-weight: var(--er-weight-semibold, 600); line-height: 1.25; color: var(--blue, #1f4e79); } .er-subhead { margin: 0; font-size: var(--er-type-subhead); font-weight: var(--er-weight-semibold, 600); line-height: 1.25; } .er-label { font-size: var(--er-type-label); font-weight: var(--er-weight-medium, 500); line-height: 1.2; color: var(--text, #1a2e34); } .er-value { font-size: var(--er-type-value); font-weight: var(--er-weight-regular, 400); } .er-result { font-size: var(--er-type-result); font-weight: var(--er-weight-medium, 500); } .er-table { font-size: var(--er-type-table); } .er-note { font-size: var(--er-type-note); color: var(--muted, #4f5b66); } .er-fine, .er-unit { font-size: var(--er-type-unit); color: var(--muted, #4f5b66); font-weight: var(--er-weight-regular, 400); } /* ——— Page / card spacing ——— */ .er-page { margin: 0; padding: var(--er-page-margin); box-sizing: border-box; } .er-card { padding: var(--er-card-pad); background: var(--surface, #fff); border: 1px solid var(--ui-border-panel, var(--border, #c5ccc6)); border-radius: var(--er-radius-dense, 3px); } .er-card .er-card, .er-card .er-group-box, .er-group-box .er-card { box-shadow: none; padding: var(--er-space-2, 4px); border-color: var(--ui-border-subtle, var(--border, #c5ccc6)); } .er-page-header { display: flex; flex-direction: column; gap: 0.1rem; margin: 0 0 var(--er-space-3, 4px); } .er-page-header h1, .er-page-header h2, .er-page-header .er-page-header__title { margin: 0; font-size: var(--er-type-section); font-weight: var(--er-weight-semibold, 600); line-height: 1.25; color: var(--blue, #1f4e79); } .er-page-header p, .er-page-header .er-page-header__note { margin: 0; font-size: var(--er-type-note); color: var(--muted, #4f5b66); line-height: 1.3; } .er-page--workspace { max-width: none; width: 100%; } .er-stack { display: flex; flex-direction: column; gap: var(--er-section-gap); } /* ——— Compact section divider (no large banners) ——— */ .er-section { display: flex; flex-direction: column; gap: var(--er-section-pad); min-width: 0; } .er-section__title { display: flex; align-items: center; gap: 0.35rem; min-height: var(--er-section-header-height); margin: 0; padding: 0 0 2px; border-bottom: 1px solid var(--ui-divider, var(--border, #c5ccc6)); font-size: var(--er-type-section); font-weight: var(--er-weight-semibold, 600); line-height: 1.2; color: var(--blue, #1f4e79); } .er-section__body { display: flex; flex-direction: column; gap: var(--er-grid-gap); min-width: 0; } /* ——— Responsive engineering grid ——— * Desktop-first: 2 / 3 / 4 columns. Cells do not stretch numeric inputs. * Use --2 / --3 / --4 to lock a count; --auto to fill leftover width. */ .er-eng-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--er-grid-gap) var(--er-space-5, 8px); align-items: start; justify-items: start; } @media (min-width: 800px) { .er-eng-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .er-eng-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1600px) { .er-eng-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .er-eng-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .er-eng-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .er-eng-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .er-eng-grid--auto { grid-template-columns: repeat(auto-fill, minmax(var(--er-eng-col-min, 16rem), 1fr)); } @media (max-width: 719.98px) { .er-eng-grid--2, .er-eng-grid--3, .er-eng-grid--4, .er-eng-grid--auto { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1099.98px) { .er-eng-grid--3, .er-eng-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .er-eng-grid__span-2 { grid-column: span 2; } .er-eng-grid__span-all { grid-column: 1 / -1; } .er-eng-grid > .er-field, .er-eng-grid .er-field { flex-direction: row; align-items: center; width: auto; max-width: 100%; } /* ——— Horizontal field layout ——— */ .er-field { display: flex; flex-direction: column; gap: var(--er-label-gap); min-width: 0; } .er-field--inline { flex-direction: row; align-items: center; gap: 0.4rem; } .er-field--inline > .er-label, .er-field--inline > label { flex: 0 1 auto; white-space: nowrap; margin: 0; font-size: var(--er-type-label); font-weight: var(--er-weight-medium, 500); } .er-field__control { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; } /* Compact controls */ .er-input, .er-field input[type="text"], .er-field input[type="number"], .er-field input:not([type]), .er-field select, .er-field textarea, input.er-input, select.er-input, textarea.er-input { box-sizing: border-box; height: var(--er-input-height); min-height: var(--er-input-height); padding: 0 0.4rem; font-family: inherit; font-size: var(--er-type-value); line-height: 1.2; color: var(--text, #1a2e34); background: var(--surface, #fff); border: 1px solid var(--border, #c5ccc6); border-radius: var(--er-radius-dense, 3px); } .er-field textarea, textarea.er-input { height: auto; min-height: calc(var(--er-input-height) * 2); padding: 0.35rem 0.4rem; } .er-input--num, .er-field--num input, input.er-input--num { width: var(--er-field-num-width); max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; } .er-input--num-compact, .er-field--num-compact input, input.er-input--num-compact { width: var(--er-field-num-compact, 64px); max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; } .er-input--num-long, .er-field--num-long input, input.er-input--num-long { width: var(--er-field-num-long, 112px); max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; } .er-input--select, .er-field--select select, select.er-input--select { width: auto; min-width: min(100%, var(--er-field-select-min, 10.5rem)); max-width: 100%; } .er-input--text, .er-field--text input, input.er-input--text { width: 100%; min-width: min(100%, var(--er-field-text-min, 12rem)); } .er-field--inline:not(.er-field--text) > .er-field__control { flex: 0 1 auto; } .er-field--inline.er-field--text { flex: 1 1 auto; } .er-input:focus, .er-field input:focus, .er-field select:focus, .er-field textarea:focus { outline: 2px solid var(--copper, #d97706); outline-offset: 0; border-color: var(--copper, #d97706); } .er-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--er-btn-height); min-height: var(--er-btn-height); padding: 0 0.65rem; font-family: inherit; font-size: var(--er-type-label); font-weight: var(--er-weight-medium, 500); line-height: 1; color: var(--text, #1a2e34); background: var(--surface, #fff); border: 1px solid var(--border, #c5ccc6); border-radius: var(--er-radius-dense, 3px); cursor: pointer; } .er-btn:hover { border-color: var(--blue, #1f4e79); color: var(--blue, #1f4e79); } .er-btn--primary { background: var(--blue, #1f4e79); border-color: var(--blue, #1f4e79); color: #fff; } .er-btn--primary:hover { filter: brightness(1.08); color: #fff; } .er-btn--toolbar { padding: 0 0.5rem; font-weight: var(--er-weight-regular, 400); } /* Density segmented control */ .er-density-control { display: inline-flex; align-items: stretch; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 4px; overflow: hidden; } .er-density-control__btn { margin: 0; padding: 0.2rem 0.45rem; border: none; border-right: 1px solid rgb(255 255 255 / 0.25); background: rgb(255 255 255 / 0.12); color: #fff; font: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; line-height: 1.2; } .er-density-control__btn:last-child { border-right: none; } .er-density-control__btn:hover { background: rgb(255 255 255 / 0.22); } .er-density-control__btn[aria-pressed="true"] { background: var(--copper, #d97706); color: #fff; } /* Info icon (replaces long instructional paragraphs) */ .er-info { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; border: 1px solid var(--muted, #4f5b66); border-radius: 50%; background: transparent; color: var(--muted, #4f5b66); font-size: 0.65rem; font-weight: 700; line-height: 1; cursor: help; } .er-info:hover, .er-info:focus-visible { border-color: var(--blue, #1f4e79); color: var(--blue, #1f4e79); outline: none; } /* Compact sample table (Phase 1 preview; full editable table in Phase 3) */ .er-table-wrap { overflow: auto; border: 1px solid var(--border, #c5ccc6); border-radius: var(--er-radius-dense, 3px); } .er-data-table { width: 100%; border-collapse: collapse; font-size: var(--er-type-table); } .er-data-table th, .er-data-table td { padding: var(--er-table-cell-y, 0.15rem) var(--er-table-cell-x, 0.35rem); border-bottom: 1px solid var(--border, #c5ccc6); text-align: left; white-space: nowrap; } .er-data-table th { font-weight: var(--er-weight-semibold, 600); background: var(--accent-soft, #e6ede8); color: var(--blue, #1f4e79); } .er-data-table td.er-num, .er-data-table th.er-num { text-align: right; font-variant-numeric: tabular-nums; } .app--dark .er-data-table th { background: var(--accent-soft, #3d4549); }