(#76) Styling improvements for Lesson and Materials PDF/Google Doc exports

Gemfile

@@ -128,6 +128,9 @@ gem "combine_pdf", "~> 1.0"
 gem "rubyzip", "~> 2.3"
 gem "nokogiri", "~> 1.19"
 gem "sanitize", "~> 7.0"
+# Inlines the Gdoc <style> CSS onto each element: Google Docs' HTML import
+# ignores <style>/global CSS, so styling must be per-element inline.
+gem "premailer", "~> 1.27"
 
 # HTTP & External APIs
 gem "httparty", "~> 0.24"

Gemfile.lock

@@ -165,6 +165,9 @@ GEM
     concurrent-ruby (1.3.6)
     connection_pool (3.0.2)
     crass (1.0.6)
+    css_parser (3.0.0)
+      addressable
+      ssrf_filter (~> 1.5)
     cssbundling-rails (1.4.3)
       railties (>= 6.0.0)
     csv (3.3.5)
@@ -456,6 +459,10 @@ GEM
       activesupport (>= 6.1)
     pp (0.6.3)
       prettyprint
+    premailer (1.29.0)
+      addressable
+      css_parser (>= 1.19.0)
+      htmlentities (>= 4.0.0)
     prettyprint (0.2.0)
     prism (1.9.0)
     pstore (0.1.4)
@@ -661,7 +668,7 @@ GEM
       net-sftp (>= 2.1.2)
       net-ssh (>= 2.8.0)
       ostruct
-    ssrf_filter (1.3.0)
+    ssrf_filter (1.5.0)
     steep (1.10.0)
       activesupport (>= 5.1)
       concurrent-ruby (>= 1.1.10)
@@ -690,7 +697,6 @@ GEM
     thruster (0.1.18-aarch64-linux)
     thruster (0.1.18-arm64-darwin)
     thruster (0.1.18-x86_64-linux)
-    tilt (2.7.0)
     timeout (0.6.0)
     traceroute (0.8.1)
       rails (>= 3.0.0)
@@ -799,6 +805,7 @@ DEPENDENCIES
   overcommit
   pg (~> 1.6)
   pg_search (~> 2.3, >= 2.3.2)
+  premailer (~> 1.27)
   pstore
   puma (>= 5.0)
   rack (~> 3.2)

app/assets/stylesheets/_tokens.scss

@@ -0,0 +1,50 @@
+// =========================================================================
+// LCMS Core styling design tokens — single source of truth
+// =========================================================================
+// Spec: "LCMS Core Styling Defaults". Open items live in
+// docs/core/styling-defaults-needs-clarification.md.
+//
+// Shared by every export stylesheet (pdf.scss, gdoc.scss, pdf_plain.scss)
+// so font, color, size, and spacing values are declared in ONE place.
+// Changing a token here updates all targets — do not re-declare these in
+// the consuming files.
+//
+// All tokens are `!default`, so a fork overrides them by importing its own
+// values BEFORE this partial:
+//
+//   @import "overrides"; // sets e.g. $font-family-body
+//   @import "tokens";    // !default assignments below are then skipped
+//
+// "Configure in code, not UI": this partial is the configuration surface.
+
+// --- Fonts ---------------------------------------------------------------
+// Approved families (client preference order): Lexend, Arial, Calibri,
+// Helvetica, Verdana. Lexend is delivered via the Google Fonts CDN @import
+// in the consuming stylesheets (decision Q5).
+
+$font-family-body: "Lexend", Arial, Calibri, Helvetica, Verdana, sans-serif !default;
+$font-family-heading: $font-family-body !default;
+
+// --- Colors --------------------------------------------------------------
+
+$color-text: #000000 !default;
+$color-text-muted: #434343 !default;
+
+// --- Sizes ---------------------------------------------------------------
+
+$font-size-body: 11pt !default;
+$font-size-caption: 9pt !default;
+$font-size-footer-bold: 10pt !default;
+$line-height-body: 1.15 !default;
+
+$font-size-h1: 22pt !default;
+$font-size-h2: 18pt !default;
+$font-size-h3: 14pt !default;
+$font-size-h4: 13pt !default;
+$font-size-h5: 12pt !default;
+$font-size-h6: 11pt !default;
+
+// --- Heading paragraph-after spacing -------------------------------------
+
+$space-heading-large: 6pt !default;  // H1, H2 paragraph-after
+$space-heading-medium: 4pt !default; // H3 paragraph-after

app/assets/stylesheets/application.bootstrap.scss

@@ -10,3 +10,27 @@ $fa-font-path: '/assets';
 @import '@fortawesome/fontawesome-free/scss/v4-shims';
 
 @import 'ckeditor';
+
+// --- Admin: callout type list --------------------------------------------
+// Icon preview in admin Settings > Documents > Callout Types
+// (app/views/admin/settings/show/_callout_list.html.erb).
+//
+// The size cap has to live here and not only in the uploader: icons uploaded
+// before CalloutIconUploader started downscaling are still stored at their
+// original resolution, and without a cap the browser lays them out at natural
+// size — a 1024px icon turns one table row into a full screen of page.
+.c-callout-list__icon-preview {
+  width: 40px;
+  height: 40px;
+  // `contain` so a non-square icon is letterboxed rather than stretched.
+  object-fit: contain;
+  flex: 0 0 auto;
+}
+
+// Keeps the preview beside the file input instead of stacked above it, so a
+// row with an icon is the same height as a row without one.
+.c-callout-list__icon-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}