/* ============================================================================ NEST MSA Report — web build of the desktop generator Palette and typography follow NEST Brand Guidelines 2026: NEST Deep Navy #0E2841 (primary, background for all digital work) NEST Black #0A0A0A NEST Teal #207888 Ice White #F5F5F5 Typeface Montserrat Shades below navy/teal are tints of those four; nothing else is introduced. ==========================================================================*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand */ --navy: #0E2841; --black: #0A0A0A; --teal: #207888; --ice: #F5F5F5; /* Shell — tints/shades of Deep Navy */ --bg: #08192A; --side: #0E2841; --surface: #12314B; --surface-2: #17395A; --line: #23486A; --line-soft: #1A3A57; /* Teal scale */ --teal-600: #1A6474; --teal-500: #2A93A6; --teal-300: #4FB3C4; --teal-200: #7FD1DE; /* Text */ --text: var(--ice); --muted: #9CB2C4; --faint: #6E88A0; /* Light surfaces (preview sheet, data grid) */ --sheet: #C4D2E0; --grid-bg: #FBFCFD; --grid-fg: #0E2841; --grid-alt: #F1F5F9; --grid-line: #DEE6EE; --grid-head: #0E2841; --grid-sel: #207888; /* Status */ --ok: #07794A; --warn: #B26A00; --bad: #C62A1C; --ok-bg: #E4F5EC; --warn-bg: #FDF2DA; --bad-bg: #FCE9E7; --sidebar-w: 336px; --radius: 5px; --radius-lg: 8px; /* Live pane sizes — driven by the drag handles (see app.js). */ --preview-h: 300px; --chart-h: 210px; } /* overflow-x on propagates to the viewport, which clips the off-canvas drawer without turning into its own scroll box — a fixed-height body swallowed the page scroll in the stacked layout. */ html { height: 100%; overflow-x: hidden; } body { min-height: 100%; font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } .visually-hidden { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--teal); color: #fff; padding: .6rem 1rem; font-size: .8rem; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--teal-300); outline-offset: 2px; } /* ── SHELL ────────────────────────────────────────────────────────────────── */ .app { display: grid; /* sidebar | drag handle | workspace */ grid-template-columns: var(--sidebar-w) auto minmax(0, 1fr); height: 100vh; height: 100dvh; } /* ── SIDEBAR ──────────────────────────────────────────────────────────────── */ .sidebar { background: var(--side); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; /* Lets the panels inside react to the dragged width, not the window width. */ container-type: inline-size; container-name: side; } .side-head { flex: 0 0 auto; padding: 16px 16px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; } .side-logo { display: block; } .side-logo img { display: block; margin: 0 auto; width: 100%; max-width: 176px; height: auto; filter: brightness(0) invert(1); transition: opacity .15s; } .side-logo:hover img { opacity: .8; } .side-sub { margin-top: 8px; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-200); } /* The scroll lives here so panels below never get squeezed by the flex column. */ .side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .panel { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .step { display: flex; align-items: center; gap: 7px; color: var(--teal-200); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .step-n { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 3px; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: 0; } /* ── Dropzone ─────────────────────────────────────────────────────────────── */ .dropzone { background: rgba(8, 25, 42, .5); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text); padding: 14px 10px; text-align: center; font-size: .78rem; line-height: 1.6; cursor: pointer; transition: background .15s, border-color .15s; word-break: break-word; max-height: 168px; overflow-y: auto; scrollbar-width: thin; } .dropzone:hover, .dropzone:focus-visible { background: var(--surface-2); border-color: var(--teal-500); } .dropzone.is-dragover { background: var(--surface-2); border-color: var(--teal-300); border-style: solid; box-shadow: inset 0 0 0 1px var(--teal-300); } .drop-icon { width: 22px; height: 22px; display: block; margin: 0 auto 6px; fill: none; stroke: var(--teal-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dropzone.has-files .drop-icon { display: none; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { width: 100%; font-family: inherit; font-size: .8rem; font-weight: 500; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s; } .btn:hover:not(:disabled) { background: var(--teal-600); border-color: var(--teal-500); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn-ghost { background: transparent; } .btn-accent { background: var(--teal); border-color: var(--teal); font-weight: 700; letter-spacing: .02em; } .btn-accent:hover:not(:disabled) { background: var(--teal-500); border-color: var(--teal-500); } .btn-sm { width: auto; font-size: .76rem; padding: 6px 12px; white-space: nowrap; } .btn-warn { background: #7A4E00; border-color: #9A6400; } .btn-warn:hover:not(:disabled) { background: #9A6400; border-color: #B87A00; } .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ── Report information ───────────────────────────────────────────────────── */ .meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; font-size: .74rem; } .meta dt { color: var(--faint); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 0; white-space: nowrap; align-self: center; } .meta dd { color: var(--text); font-weight: 500; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .meta dd.is-empty { color: var(--faint); font-weight: 400; } .meta .m-warn { color: #F0B23C; } .meta .m-bad { color: #F2857A; } /* ── Status rules ─────────────────────────────────────────────────────────── */ .rules { display: flex; flex-direction: column; gap: 8px; } .rules-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 8px; align-items: center; } .rules-grid label { font-size: .68rem; color: var(--muted); white-space: nowrap; } .rules-grid input { width: 100%; min-width: 0; font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--text); background: rgba(8, 25, 42, .6); border: 1px solid var(--line); border-radius: 4px; padding: 5px 7px; outline: none; font-variant-numeric: tabular-nums; } .rules-grid input:focus { border-color: var(--teal-300); box-shadow: 0 0 0 2px rgba(79, 179, 196, .25); } .rules-grid input[aria-invalid="true"] { border-color: #F2857A; box-shadow: 0 0 0 2px rgba(242, 133, 122, .25); } /* ── Sidebar footer ───────────────────────────────────────────────────────── */ .side-foot-wrap { flex: 0 0 auto; padding: 10px 16px 14px; border-top: 1px solid var(--line-soft); background: rgba(8, 25, 42, .35); } .progress { height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-bottom: 8px; } .progress[hidden] { display: none; } .progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--teal-300)); transition: width .18s linear; } .side-status { color: var(--text); font-size: .74rem; line-height: 1.5; word-break: break-word; } .side-foot { color: var(--faint); font-size: .66rem; line-height: 1.65; margin-top: 10px; text-align: center; } .side-foot-brand { color: var(--teal-200); font-weight: 700; letter-spacing: .1em; } /* Narrow panel: the paired rule fields and button rows stop fitting side by side well before the window itself gets small, so react to the panel. */ @container side (max-width: 312px) { .rules-grid { grid-template-columns: auto minmax(0, 1fr); } .btn-row { grid-template-columns: minmax(0, 1fr); } } /* ── WORKSPACE ────────────────────────────────────────────────────────────── */ .workspace { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 0; min-width: 0; overflow: hidden; } /* ── Toolbar ──────────────────────────────────────────────────────────────── */ .toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tb-group { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 2px; } .icon-btn { display: grid; place-items: center; width: 26px; height: 24px; padding: 0; background: none; border: none; border-radius: 3px; cursor: pointer; color: var(--text); transition: background .15s, color .15s; } .icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-btn:hover:not(:disabled) { background: var(--teal-600); } .icon-btn:disabled { opacity: .35; cursor: not-allowed; } .page-label { font-size: .74rem; font-weight: 600; color: var(--text); white-space: nowrap; padding: 0 6px; min-width: 5.6rem; text-align: center; font-variant-numeric: tabular-nums; } .seg { font-family: inherit; font-size: .72rem; font-weight: 500; color: var(--muted); background: none; border: none; border-radius: 3px; padding: 5px 10px; cursor: pointer; transition: background .15s, color .15s; } .seg:hover { color: var(--text); } .seg.is-active { background: var(--teal); color: #fff; font-weight: 600; } .toolbar-spacer { flex: 1; } .toolbar-note { font-size: .72rem; color: var(--muted); font-style: italic; } /* ── KPI strip ────────────────────────────────────────────────────────────── */ .kpi { flex: 0 0 auto; display: grid; /* Packs into one row on a laptop and wraps gracefully below that. */ grid-template-columns: repeat(auto-fit, minmax(102px, 1fr)); gap: 6px; } .kpi[hidden] { display: none; } .kpi-tile { background: var(--surface); border: 1px solid var(--line-soft); border-left: 2px solid var(--teal); border-radius: var(--radius); padding: 5px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .kpi-k { font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-v { font-size: .96rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.25; } .kpi-tile.is-ok { border-left-color: #2FB27C; } .kpi-tile.is-ok .kpi-v { color: #55D3A0; } .kpi-tile.is-review { border-left-color: #D89A2C; } .kpi-tile.is-review .kpi-v { color: #F0B23C; } .kpi-tile.is-critical { border-left-color: #D9584A; } .kpi-tile.is-critical .kpi-v { color: #F2857A; } /* ── Panes ────────────────────────────────────────────────────────────────── */ .pane { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; min-height: 0; background: var(--surface); } .pane-preview { flex: 0 0 auto; height: var(--preview-h); } .pane-results { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 120px; } .pane-chart { flex: 0 0 auto; height: var(--chart-h); } /* ── Resize handles ───────────────────────────────────────────────────────── */ .resizer { flex: 0 0 auto; height: 10px; margin: -3px 0; position: relative; z-index: 5; cursor: row-resize; display: grid; place-items: center; touch-action: none; border-radius: 3px; } .resizer-grip { width: 46px; height: 3px; border-radius: 2px; background: var(--line); transition: background .15s, width .15s; } .resizer:hover .resizer-grip, .resizer:focus-visible .resizer-grip, .resizer.is-dragging .resizer-grip { background: var(--teal-300); width: 84px; } .resizer.is-dragging { cursor: row-resize; } body.is-resizing { cursor: row-resize; user-select: none; } body.is-resizing * { cursor: row-resize !important; } /* Vertical twin, between the control panel and the workspace. Negative side margins keep it a 4px-wide grid column that overlays the sidebar border. */ .v-resizer { width: 10px; margin: 0 -3px; position: relative; z-index: 6; cursor: col-resize; display: grid; place-items: center; touch-action: none; } .v-resizer-grip { width: 3px; height: 46px; border-radius: 2px; background: var(--line); transition: background .15s, height .15s; } .v-resizer:hover .v-resizer-grip, .v-resizer:focus-visible .v-resizer-grip, .v-resizer.is-dragging .v-resizer-grip { background: var(--teal-300); height: 96px; } body.is-resizing-x { cursor: col-resize; user-select: none; } body.is-resizing-x * { cursor: col-resize !important; } /* ── Preview ──────────────────────────────────────────────────────────────── */ .preview { position: relative; height: 100%; /* Fine graph-paper grid: reads as a drafting surface behind the page. */ background-color: var(--sheet); background-image: linear-gradient(rgba(14, 40, 65, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 40, 65, .07) 1px, transparent 1px); background-size: 16px 16px, 16px 16px; overflow: hidden; } .preview-scroll { width: 100%; height: 100%; overflow: auto; padding: 14px; display: flex; align-items: center; justify-content: center; align-items: safe center; justify-content: safe center; scrollbar-width: thin; } #pdfCanvas { display: block; flex: 0 0 auto; box-shadow: 0 4px 18px rgba(8, 25, 42, .35); background: #fff; border: 1px solid rgba(14, 40, 65, .18); } #pdfCanvas:not([data-ready]) { display: none; } .preview-empty, .preview-busy { position: absolute; inset: 0; margin: auto; height: fit-content; text-align: center; padding: 1.2rem; color: #476076; font-size: .82rem; line-height: 1.65; } .preview-empty[hidden], .preview-busy[hidden] { display: none; } .empty-icon { width: 34px; height: 34px; margin: 0 auto 10px; display: block; fill: none; stroke: #6E8399; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .preview-busy { color: var(--navy); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; } .spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(14, 40, 65, .25); border-top-color: var(--teal); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Alert ────────────────────────────────────────────────────────────────── */ .alert { flex: 0 0 auto; background: rgba(198, 42, 28, .16); color: #FFD6D1; border: 1px solid rgba(198, 42, 28, .5); border-left: 3px solid #E05B4C; border-radius: var(--radius); padding: 8px 12px; font-size: .78rem; font-weight: 500; } .alert[hidden] { display: none; } /* ── QUICK RESULT TABLE ───────────────────────────────────────────────────── */ .quick-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line-soft); } .quick-title { font-size: .74rem; font-weight: 700; color: var(--text); letter-spacing: .08em; text-transform: uppercase; } .quick-hint { font-weight: 400; font-size: .68rem; color: var(--faint); letter-spacing: 0; text-transform: none; } .quick-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; } .search-wrap { display: flex; align-items: center; position: relative; } .search-icon { position: absolute; left: 8px; width: 13px; height: 13px; pointer-events: none; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; } .search-wrap input { font-family: inherit; font-size: .76rem; color: var(--text); background: rgba(8, 25, 42, .6); border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px 5px 26px; width: 12rem; max-width: 100%; outline: none; } .search-wrap input::placeholder { color: var(--faint); } .search-wrap input:focus { border-color: var(--teal-300); } .row-count { font-size: .7rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .quick-wrap { flex: 1 1 auto; background: var(--grid-bg); overflow: auto; overscroll-behavior: contain; min-height: 0; } #resultsTable { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: .78rem; } #resultsTable thead th { position: sticky; top: 0; z-index: 2; background: var(--grid-head); color: var(--ice); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 0; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--teal); } .sort-btn { width: 100%; background: none; border: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 7px 10px; display: flex; align-items: center; gap: 4px; } .sort-btn:hover { background: rgba(255, 255, 255, .12); } .sort-ind { font-size: .55rem; opacity: 0; } .sort-btn[data-dir="asc"] .sort-ind::after { content: '\25B2'; } .sort-btn[data-dir="desc"] .sort-ind::after { content: '\25BC'; } .sort-btn[data-dir] .sort-ind { opacity: 1; color: var(--teal-300); } #resultsTable th.c-pts .sort-btn, #resultsTable th.c-stat .sort-btn { justify-content: center; } #resultsTable th.c-num .sort-btn { justify-content: flex-end; } #resultsTable tbody tr { color: var(--grid-fg); cursor: pointer; } #resultsTable tbody tr:nth-child(even) { background: var(--grid-alt); } #resultsTable tbody tr:hover { background: #E3EDF6; } #resultsTable tbody tr.is-selected { background: var(--grid-sel); color: #fff; } #resultsTable tbody tr.is-selected .pill { background: rgba(255, 255, 255, .2); color: #fff; } #resultsTable td { padding: 5px 10px; border-bottom: 1px solid var(--grid-line); white-space: nowrap; height: 27px; } td.c-test { max-width: 0; width: 46%; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } td.c-pts { text-align: center; font-variant-numeric: tabular-nums; color: #4B637B; } #resultsTable tbody tr.is-selected td.c-pts { color: rgba(255, 255, 255, .85); } td.c-num { text-align: right; font-variant-numeric: tabular-nums; } td.c-stat { text-align: center; } .pill { display: inline-block; min-width: 4.7rem; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .07em; } .pill.st-ok { background: var(--ok-bg); color: var(--ok); } .pill.st-review { background: var(--warn-bg); color: var(--warn); } .pill.st-critical { background: var(--bad-bg); color: var(--bad); } /* Editable metric cells */ td.is-editable { position: relative; } td.is-editable:hover { box-shadow: inset 0 0 0 2px var(--teal); } td.is-editable:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } td.is-overridden { background: var(--warn-bg); font-style: italic; font-weight: 700; } #resultsTable tbody tr.is-selected td.is-overridden { color: var(--grid-fg); } .override-mark { margin-left: 3px; font-size: .66rem; font-style: normal; opacity: .8; } td.is-editing { padding: 1px 3px; } .metric-input { width: 100%; min-width: 4rem; font-family: inherit; font-size: .78rem; font-weight: 700; text-align: right; color: var(--grid-fg); background: #fff; border: 2px solid var(--teal); border-radius: 3px; padding: 2px 4px; outline: none; } .no-results { padding: 1.6rem; text-align: center; color: #607085; font-size: .82rem; } /* ── CHART ────────────────────────────────────────────────────────────────── */ .chart-box { background: #fff; height: 100%; position: relative; } #chart { display: block; width: 100%; height: 100%; } /* ── MOBILE BAR / DRAWER ──────────────────────────────────────────────────── */ .mobile-bar { display: none; } .drawer-scrim { display: none; } /* ── RESPONSIVE ───────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { :root { --sidebar-w: 300px; } .quick-hint { display: none; } } @media (max-width: 1000px) { .mobile-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 60; background: var(--side); height: 52px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); box-shadow: 0 2px 10px rgba(4, 12, 22, .45); } .mobile-logo { height: 22px; width: auto; filter: brightness(0) invert(1); } .mobile-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-200); } .drawer-toggle { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 7px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .drawer-icon { display: flex; flex-direction: column; gap: 3px; } .drawer-icon span { display: block; width: 17px; height: 2px; background: var(--text); border-radius: 1px; } .app { grid-template-columns: minmax(0, 1fr); height: auto; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; width: min(330px, 88vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 22px rgba(4, 12, 22, .5); } .sidebar.is-open { transform: translateX(0); } .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(4, 12, 22, .62); } .drawer-scrim[hidden] { display: none; } /* Stacked, page-scrolled layout: the drag handles no longer apply. */ .workspace { height: auto; padding: 10px; overflow: visible; } .resizer, .v-resizer { display: none; } .pane-preview { height: 46vh; min-height: 240px; } .pane-results { flex: 0 0 auto; height: 300px; } .pane-chart { height: 220px; } } @media (max-width: 700px) { body { font-size: 14px; } .workspace { padding: 8px; gap: 6px; } .toolbar { gap: 6px; } .toolbar-note { display: none; } .btn-sm { font-size: .72rem; padding: 6px 10px; } /* Two tidy rows of four instead of ellipsised labels in three. */ .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-tile { padding: 4px 7px; } .kpi-k { white-space: normal; font-size: .52rem; line-height: 1.3; } .kpi-v { font-size: .84rem; } .pane-preview { height: 40vh; min-height: 210px; } .preview-scroll { padding: 8px; } .quick-head { gap: 8px; } .quick-tools { margin-left: 0; width: 100%; } .search-wrap { flex: 1; } .search-wrap input { width: 100%; } .pane-results { height: 280px; } .pane-chart { height: 190px; } } @media (max-width: 420px) { .mobile-title { display: none; } .seg-group { display: none; } .pane-results { height: 250px; } .pane-chart { height: 170px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .sidebar, .mobile-bar, .toolbar, .resizer, .v-resizer, .drawer-scrim { display: none !important; } .app { display: block; height: auto; } .workspace { height: auto; overflow: visible; } }