/* cityplanner-2026 — public/css/mapchat-notebook.css (PLN-014 T-15, DA-08) * * Foglio scritto A MANO per views/mapchat-notebook-editor.ejs. Il markup che * stila è NUOVO (nessuna pagina legacy equivalente da cui copiare un bundle * Tailwind già compilato — a differenza di public/css/geodata-download.css, * PLN-011 DA-04), quindi qui non c'è alcun chunk copiato: solo classi scritte * per gli hook `className`/`class="mn-..."` che * public/js/mapchat-notebook/{editor,header,left-sidebar}.js e * public/js/mapchat-notebook/blocks/*.js già costruiscono a runtime (letti * dal codice, non indovinati). * * Palette — cream di sistema (PLN-017 T-13, rework dal walkthrough). La * palette scura ereditata dallo shell legacy (DA-08/DA-02 "il canvas * dell'app resta scuro") è stata BOCCIATA alla prova visiva: l'app è * uniformata al canvas cream del design system. La via è il RIBALTAMENTO * dei token: le custom property `--mn-color-*` (i cui NOMI sono il * contratto con le regole sotto e restano invariati) sono rimappate sui * token di /css/site.css — superfici su --bg/--bg-soft/--bg-code, testo su * --ink/--ink-2, bordi su --rule, stati su --mark/--live — più le tinte * funzionali scurite per la codifica per-tipo dei blocchi (blu/viola/teal/ * ambra come letterali; il verde del blocco table riusa il tono success * derivato da --live): il color coding text/image/map/table/chart va * preservato e nessun token di sistema offre quelle hue. Ogni abbinamento * TESTUALE è verificato ≥ 4.5:1 (AA) sulla superficie più scura che lo * ospita (--bg-soft), i soli usi non testuali ≥ 3:1; per questo gli stati * error/success usano toni derivati via color-mix (mark/live scuriti con * l'inchiostro), non i token nudi. I colori di disegno di Chart.js e * MapLibre — fuori dalla portata del CSS — sono allineati a mano in * blocks/chart-block.js e blocks/map-block.js (stesso blu primario). * * PLN-017 T-06 (DA-02) — veste di sistema: la vista carica /css/site.css * PRIMA di questo foglio e il canvas dell'app passa dal al wrapper * `.mapchat-app`, la classe RADICE DI SCOPING dell'audit. Audit delle regole * su elementi bari che intercettavano la chrome di sistema (site-header/ * site-footer, ora fuori dal wrapper): * - `html,body{height:100%}` → RIMOSSA: serviva solo a far riempire il * viewport al canvas del body; sostituita da `.mapchat-app{min-height:100vh}`. * - `body{…}` → trasposta in `.mapchat-app{…}` (background/color/font-family/ * font-size/line-height). `margin:0` cade (lo imposta già il body di * site.css; inerte su un div); `padding-top:var(--mn-header-height)` cade * perché #app-header passa da fixed a sticky (vedi sotto) e torna a * occupare flusso da sé. * - `a{color:…}` → `.mapchat-app :where(a){…}`: `:where()` tiene la * specificità invariata rispetto alle regole dell'app — stesso pattern * dell'audit T-05 su geodata-download.css. * - NUOVA guardia `.mapchat-app :where(p){color:inherit;line-height:inherit}`: * site.css imposta `p{color:var(--ink-2);line-height:1.65}` (0,0,1), che * batterebbe l'EREDITARIETÀ su cui contano i

non classati dell'app * (es. il messaggio in .mn-sidebar__status--error, che deve prendere il * tono dello stato dal contenitore, non il grigio dei paragrafi); la * guardia ripristina l'inheritance dal wrapper senza toccare i

della * chrome (fuori radice). * Restano globali di proposito (stessa politica dell'audit T-05): il reset * `*{box-sizing:border-box}` (proprietà identica a quella di site.css) e * `button,input,select,textarea{font/color:inherit}` (elementi assenti dalla * chrome di sistema). * * Layout con la chrome attorno (site-header sopra, site-footer sotto — l'app * resta il flusso naturale della pagina, il body è l'unico scroll container): * - `#app-header`: fixed → sticky (top:0). In flusso sotto il site-header a * inizio pagina; si aggancia al top del viewport appena lo scroll supera * il masthead: stessa UX "header sempre visibile mentre si edita", nessuna * sovrapposizione con la chrome. La toolbar sticky dell'editor * (top: header + 0.75rem) continua ad accodarsi sotto di lui invariata. * - `.mn-sidebar`/`.mn-sidebar-backdrop`: da sotto-header (top:60px) a * viewport pieno (top:0) — con l'header sticky la vecchia quota fissa non * corrisponde più alla sua posizione a inizio pagina. Aperto, il drawer * copre anche l'header dell'app e la chrome (z 39/40, come già faceva il * modal auth con inset:0 z 50): il click sul toggle coperto atterra sul * backdrop e CHIUDE comunque (data-action="close-backdrop" in * left-sidebar.js), Esc chiude — nessuna perdita di usabilità. */ :root { /* Accent — tinte funzionali scurite per AA sul chiaro (vedi nota di testa): il primario è anche colore di TESTO (link, tab attivo), quindi ≥ 4.5:1 su ogni superficie (5.15:1 su --bg-soft, la più scura); gli altri accent sono solo bordi/codifica blocchi, ≥ 3:1 su --bg-soft. Hover/active derivati dal primario via color-mix con l'inchiostro. */ --mn-color-primary: #31597f; --mn-color-primary-hover: color-mix(in srgb, #31597f 85%, var(--ink)); --mn-color-primary-active: color-mix(in srgb, #31597f 70%, var(--ink)); --mn-color-secondary: #6d4d9e; --mn-color-secondary-hover: color-mix(in srgb, #6d4d9e 85%, var(--ink)); --mn-color-accent: #0e7490; --mn-color-accent-hover: color-mix(in srgb, #0e7490 85%, var(--ink)); /* Surfaces — canvas --bg, superfici in rilievo --bg-soft (stesso idioma di gd-app-bar/gd-banner), campi input --bg-code (carta più chiara); hover/active come velature d'inchiostro sulla superficie. */ --mn-color-surface-primary: var(--bg); --mn-color-surface-secondary: var(--bg-soft); --mn-color-surface-tertiary: var(--bg-code); --mn-color-surface-quaternary: color-mix(in srgb, var(--ink) 8%, var(--bg)); --mn-color-surface-hover: color-mix(in srgb, var(--ink) 7%, var(--bg-soft)); --mn-color-surface-active: color-mix(in srgb, var(--ink) 12%, var(--bg-soft)); --mn-color-surface-overlay: rgba(22, 20, 15, 0.5); /* Text — inchiostro di sistema. Secondary e tertiary collassano entrambi su --ink-2 (5.01:1 su --bg-soft): --ink-3 sul soft scende a 4.18:1, sotto AA (stessa misura del rework geodata-download) — la gerarchia fine la portano già i corpi ridotti. quaternary solo per glifi non testuali (drag handle, ≥ 3:1); inverse = cream sui riempimenti scuri. */ --mn-color-text-primary: var(--ink); --mn-color-text-secondary: var(--ink-2); --mn-color-text-tertiary: var(--ink-2); --mn-color-text-quaternary: var(--ink-3); --mn-color-text-disabled: var(--ink-3); --mn-color-text-inverse: var(--bg); /* Borders — hairline di sistema; il neutro dei blocchi senza tipo è --ink-2 (idioma gd-banner); il focus dei campi è inchiostro pieno, coerente col --focus-outline di sistema. */ --mn-color-border-primary: var(--rule); --mn-color-border-secondary: var(--ink-2); --mn-color-border-tertiary: var(--rule); --mn-color-border-focus: var(--ink); /* Status — toni derivati dai token: il verde/rosso di sistema nudi (--live 3.68:1, --mark 4.48:1 su --bg-soft) bastano per bordi ma non per TESTO, quindi success/error testuali sono scuriti con l'inchiostro (6.61:1 su --bg-code, 5.36:1 su --bg-soft); il bordo error resta --mark. warning solo bordo blocco chart (3.77:1 ≥ 3:1). */ --mn-color-success: color-mix(in srgb, var(--live) 70%, var(--ink)); --mn-color-warning: #8a6410; --mn-color-error: color-mix(in srgb, var(--mark) 85%, var(--ink)); --mn-color-error-border: var(--mark); --mn-color-info: #31597f; --mn-header-height: 60px; --mn-sidebar-width: 320px; --mn-radius: 8px; --mn-radius-sm: 4px; } /* --- Reset / base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Radice dell'app (T-06): ex regole body, più min-height:100vh al posto del ritirato `html,body{height:100%}` — il canvas dell'app riempie almeno il viewport anche a notebook vuoto. Niente padding-top: #app-header è sticky (in flusso), non più fixed. Font: lo stack di sistema del legacy lascia il posto a --font-body (T-13, stessa scelta del rework geodata-download) — canvas E tipografia del design system. L'override di --focus-outline introdotto da T-10 per il canvas scuro è RIMOSSO: sul cream vale il default --ink di site.css (14.5:1 sul canvas, 12.9:1 sulle superfici). */ .mapchat-app { min-height: 100vh; background: var(--mn-color-surface-primary); color: var(--mn-color-text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.5; } button, input, select, textarea { font: inherit; color: inherit; } /* Focus visibile sui controlli dell'app (T-13, stesso pattern del rework geodata-download): outline inchiostro (--focus-outline di sistema) fuori dal bordo, visibile anche sui bottoni pieni perché cade sul fondo chiaro circostante. I campi con una regola :focus più specifica (border pieno, outline:none) mantengono il proprio stato. */ .mapchat-app :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } .mapchat-app :where(a) { color: var(--mn-color-primary); } /* Guardia DA-02 (vedi nota di testa): i

non classati dell'app tornano a ereditare dal wrapper invece di prendere `p{color;line-height}` di site.css. */ .mapchat-app :where(p) { color: inherit; line-height: inherit; } /* --- Buttons ----------------------------------------------------------- */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; border: 1px solid transparent; border-radius: var(--mn-radius-sm); padding: 0.45em 0.9em; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .mn-btn:disabled { cursor: not-allowed; opacity: 0.6; } .mn-btn--primary { background: var(--mn-color-primary); color: var(--mn-color-text-inverse); } .mn-btn--primary:hover:not(:disabled) { background: var(--mn-color-primary-hover); } .mn-btn--ghost { background: transparent; border-color: var(--mn-color-border-primary); color: var(--mn-color-text-secondary); } .mn-btn--ghost:hover:not(:disabled) { border-color: var(--mn-color-primary); color: var(--mn-color-text-primary); } /* Pieno rosso di sistema con cream sopra (5.02:1, idioma gd-btn--danger); hover sul tono error scurito (6.01:1 col cream). */ .mn-btn--danger { background: var(--mark); color: var(--mn-color-text-inverse); } .mn-btn--danger:hover:not(:disabled) { background: var(--mn-color-error); } .mn-btn--icon { padding: 0.35em 0.5em; background: transparent; border-color: var(--mn-color-border-tertiary); color: var(--mn-color-text-secondary); } .mn-btn--icon:hover:not(:disabled) { color: var(--mn-color-text-primary); border-color: var(--mn-color-border-secondary); } .mn-btn--icon.mn-btn--danger { background: transparent; color: var(--mn-color-error); border-color: var(--mn-color-error-border); } .mn-btn--icon.mn-btn--danger:hover:not(:disabled) { background: var(--mn-color-error); color: var(--mn-color-text-inverse); } /* --- Form fields (login/register + create/rename) ----------------------- */ .mn-field { display: flex; flex-direction: column; gap: 0.3em; margin-bottom: 0.9em; font-size: 0.85rem; color: var(--mn-color-text-secondary); } .mn-field small { color: var(--mn-color-text-tertiary); } .mn-field input, .mn-sidebar__search input { background: var(--mn-color-surface-tertiary); border: 1px solid var(--mn-color-border-primary); border-radius: var(--mn-radius-sm); padding: 0.5em 0.7em; color: var(--mn-color-text-primary); } .mn-field input:focus, .mn-sidebar__search input:focus { outline: none; border-color: var(--mn-color-border-focus); } /* --- Header (#app-header, header.js) ------------------------------------ */ /* Sticky, non fixed (T-06): in flusso sotto il site-header a inizio pagina, agganciato al top del viewport una volta scrollato oltre il masthead. */ #app-header { position: sticky; top: 0; z-index: 30; height: var(--mn-header-height); } .mn-header { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 0 1rem; background: var(--mn-color-surface-secondary); border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-header__toggle { background: transparent; border: none; color: var(--mn-color-text-secondary); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.3em 0.5em; border-radius: var(--mn-radius-sm); } .mn-header__toggle:hover { color: var(--mn-color-text-primary); background: var(--mn-color-surface-hover); } .mn-header__brand { display: flex; align-items: baseline; gap: 0.6em; } /* Titolo in display serif + micro-label mono uppercase: stesso registro dell'app-bar geodata (gd-app-title/gd-app-subtitle) — subtitle in --ink-2 (via text-tertiary) perché --ink-3 su --bg-soft è sotto AA. */ .mn-header__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; color: var(--mn-color-text-primary); } .mn-header__subtitle { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mn-color-text-tertiary); } .mn-header__auth { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .mn-header__username { font-size: 0.85rem; color: var(--mn-color-text-secondary); } /* --- Auth modal (header.js) ---------------------------------------------- */ /* Scrim d'inchiostro semitrasparente (token surface-overlay): resta scuro di proposito — è uno scrim che ammutolisce la pagina sotto, non un canvas; sul cream la modale in --bg-soft ci stacca sopra. */ .mn-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--mn-color-surface-overlay); } .mn-modal { width: 100%; max-width: 420px; margin: 1rem; padding: 1.5rem; background: var(--mn-color-surface-secondary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius); box-shadow: 0 20px 40px rgba(22, 20, 15, 0.25); position: relative; } .mn-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; color: var(--mn-color-text-tertiary); font-size: 1.3rem; line-height: 1; cursor: pointer; } .mn-modal__close:hover { color: var(--mn-color-text-primary); } .mn-modal__tabs { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-modal__tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--mn-color-text-tertiary); font-weight: 600; padding: 0 0 0.6rem; cursor: pointer; } .mn-modal__tab.is-active { color: var(--mn-color-text-primary); border-bottom-color: var(--mn-color-primary); } /* Box di stato del form: carta chiara --bg-code con bordo e testo nel tono di stato (idioma gd-alert) — error 6.35:1, success 6.61:1 su --bg-code. */ .mn-modal__error { background: var(--bg-code); border: 1px solid var(--mn-color-error-border); color: var(--mn-color-error); border-radius: var(--mn-radius-sm); padding: 0.6em 0.8em; font-size: 0.85rem; margin-bottom: 1em; } .mn-modal__message { background: var(--bg-code); border: 1px solid var(--mn-color-success); color: var(--mn-color-success); border-radius: var(--mn-radius-sm); padding: 0.6em 0.8em; font-size: 0.85rem; margin-bottom: 1em; } .mn-modal__submit { width: 100%; margin-top: 0.25rem; } /* --- Sidebar (#app-sidebar, left-sidebar.js) ----------------------------- */ #app-sidebar { position: relative; z-index: 40; } /* Backdrop e drawer a viewport pieno (T-06, vedi nota di testa): con #app-header sticky la vecchia quota fissa sotto-header (60px) non corrisponde più alla sua posizione a inizio pagina. Lo scrim resta scuro (inchiostro semitrasparente, stesso token della modale): è uno scrim, non canvas — vedi nota su .mn-modal-backdrop. */ .mn-sidebar-backdrop { position: fixed; inset: 0; z-index: 39; background: var(--mn-color-surface-overlay); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .mn-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; } .mn-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--mn-sidebar-width); max-width: 90vw; z-index: 40; display: flex; flex-direction: column; background: var(--mn-color-surface-secondary); border-right: 1px solid var(--mn-color-border-tertiary); box-shadow: 4px 0 24px rgba(22, 20, 15, 0.2); transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; } .mn-sidebar.is-open { transform: translateX(0); } .mn-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-sidebar__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--mn-color-text-primary); } .mn-sidebar__search { padding: 0.75rem 1rem; border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-sidebar__search input { width: 100%; } .mn-sidebar__create-form, .mn-sidebar__rename-form { padding: 0.75rem 1rem; border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-sidebar__rename-form { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem 1rem; } .mn-sidebar__rename-form input { flex: 1; background: var(--mn-color-surface-tertiary); border: 1px solid var(--mn-color-border-primary); border-radius: var(--mn-radius-sm); padding: 0.4em 0.6em; color: var(--mn-color-text-primary); } .mn-sidebar__form-actions { display: flex; gap: 0.5rem; } .mn-sidebar__status { padding: 1rem; color: var(--mn-color-text-tertiary); font-size: 0.85rem; } .mn-sidebar__status--error { color: var(--mn-color-error); } .mn-sidebar__list { flex: 1; overflow-y: auto; } .mn-sidebar__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--mn-color-border-tertiary); } .mn-sidebar__item:hover { background: var(--mn-color-surface-hover); } .mn-sidebar__item--renaming { background: var(--mn-color-surface-active); } .mn-sidebar__item-title { flex: 1; text-align: left; background: transparent; border: none; color: var(--mn-color-text-primary); font-size: 0.9rem; cursor: pointer; padding: 0.2em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-sidebar__item-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } /* --- Editor (#notebook-content, editor.js) -------------------------------- */ #notebook-content { display: block; max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 4rem; } .mn-editor { display: flex; flex-direction: column; gap: 1rem; } .mn-editor__toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: var(--mn-color-surface-secondary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius); position: sticky; top: calc(var(--mn-header-height) + 0.75rem); z-index: 10; } .mn-editor__status { padding: 0.6em 0.9em; background: var(--mn-color-surface-secondary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius-sm); color: var(--mn-color-text-tertiary); font-size: 0.85rem; } .mn-editor__blocks { display: flex; flex-direction: column; gap: 0.75rem; } .mn-editor__empty { padding: 2rem 1rem; text-align: center; color: var(--mn-color-text-tertiary); border: 1px dashed var(--mn-color-border-primary); border-radius: var(--mn-radius); } /* --- Block shell (drag handle + delete + the block's own el) ------------- */ .mn-block-shell { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--mn-color-surface-secondary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius); padding: 0.75rem; cursor: grab; transition: opacity 0.15s ease, border-color 0.15s ease; } .mn-block-shell.dragging { opacity: 0.4; } .mn-block-shell.drag-over { border-color: var(--mn-color-primary); box-shadow: 0 0 0 1px var(--mn-color-primary); } .mn-block-shell__toolbar { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; padding-top: 0.2rem; } .mn-block-shell__drag-handle { color: var(--mn-color-text-quaternary); font-size: 1.1rem; line-height: 1; cursor: grab; } .mn-block-shell > .mn-block { flex: 1; min-width: 0; } /* --- Blocks: common shape, one accent border per type --------------------- */ .mn-block { border-left: 3px solid var(--mn-color-border-secondary); padding-left: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; } .mn-block--text { border-left-color: var(--mn-color-primary); } .mn-block--image { border-left-color: var(--mn-color-secondary); } .mn-block--map { border-left-color: var(--mn-color-accent); } .mn-block--table { border-left-color: var(--mn-color-success); } .mn-block--chart { border-left-color: var(--mn-color-warning); } /* Text block */ .mn-block__text-input { width: 100%; min-height: 4.5rem; resize: vertical; background: var(--mn-color-surface-tertiary); border: 1px solid var(--mn-color-border-primary); border-radius: var(--mn-radius-sm); padding: 0.6em 0.8em; color: var(--mn-color-text-primary); } .mn-block__text-input:focus { outline: none; border-color: var(--mn-color-border-focus); } /* Image block */ .mn-block__image-url-input, .mn-block__image-caption-input { width: 100%; background: var(--mn-color-surface-tertiary); border: 1px solid var(--mn-color-border-primary); border-radius: var(--mn-radius-sm); padding: 0.5em 0.7em; color: var(--mn-color-text-primary); } .mn-block__image-preview { display: flex; justify-content: center; background: var(--mn-color-surface-primary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius-sm); min-height: 120px; overflow: hidden; } .mn-block__image-img { max-width: 100%; max-height: 360px; object-fit: contain; } .mn-block__image-error { color: var(--mn-color-error); font-size: 0.8rem; } /* Map / Table / Chart blocks — shared toolbar shape */ .mn-block__map-toolbar, .mn-block__table-toolbar, .mn-block__chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .mn-block__map-select-label, .mn-block__table-select-label, .mn-block__chart-select-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--mn-color-text-tertiary); } .mn-block__map-dataset-select, .mn-block__table-dataset-select, .mn-block__chart-dataset-select, .mn-block__chart-property-select, .mn-block__chart-type-select { background: var(--mn-color-surface-tertiary); border: 1px solid var(--mn-color-border-primary); border-radius: var(--mn-radius-sm); padding: 0.35em 0.6em; color: var(--mn-color-text-primary); } .mn-block__map-status, .mn-block__table-status, .mn-block__chart-status { font-size: 0.8rem; color: var(--mn-color-text-tertiary); } .mn-block__map-error, .mn-block__table-error { font-size: 0.8rem; color: var(--mn-color-error); } /* Map block canvas */ .mn-block__map-canvas { width: 100%; height: 360px; border-radius: var(--mn-radius-sm); overflow: hidden; background: var(--mn-color-surface-primary); } /* Table block grid (Tabulator mounts here) */ .mn-block__table-grid { min-height: 240px; background: var(--mn-color-surface-primary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius-sm); } /* Chart block canvas */ .mn-block__chart-canvas-wrap { position: relative; width: 100%; height: 320px; background: var(--mn-color-surface-primary); border: 1px solid var(--mn-color-border-tertiary); border-radius: var(--mn-radius-sm); padding: 0.75rem; } .mn-block__chart-canvas { width: 100% !important; height: 100% !important; } .mn-block__chart-message { color: var(--mn-color-text-tertiary); font-size: 0.85rem; } /* Variante toggolata da chart-block.js (showMessage(isError)) — classe già emessa a runtime, prima senza regola nel foglio: colmata qui col tono error, come i gemelli map/table. */ .mn-block__chart-message--error { color: var(--mn-color-error); } /* --- Small screens --------------------------------------------------------- */ @media (max-width: 640px) { :root { --mn-sidebar-width: 88vw; } #notebook-content { padding: 1rem 0.75rem 3rem; } .mn-block-shell { flex-direction: column; } .mn-block-shell__toolbar { flex-direction: row; } }