/* SENguru reskin — app entry stylesheet (#1097) ================================================================ This is the ONE file base.html links (only for the senguru / senguru-dark themes). It composes the vendored reskin kit in the order the cascade needs, then adds a dark-mode override layer. Import order matters: 1. colors_and_type.css — fonts, brand palette, base element type, and the daisyUI token re-exports on :root (light values). 2. daisyui-theme.css — the same tokens scoped to [data-theme="senguru"] and [data-theme="senguru-dark"]. Loaded AFTER (1) so the dark block overrides the :root light values when data-theme="senguru-dark" (equal specificity → source order wins). 3. senguru-daisyui.css — component + brand-pattern layer. It is tuned for the LIGHT brand (hardcoded #fff cards, dark ink on outlines), so the dark overrides below re-point its surfaces to the themed daisyUI tokens. The kit is left byte-for-byte as vendored so it can be re-synced; all app-specific dark corrections live in this file only. Cascade layering (#1099, order corrected in #1107): the element/component stylesheets load into the ``utilities.senguru-reskin`` sublayer so the app's intentional CSS keeps winning — unlayered app.css rules beat any layer, and the #908 behaviour-chip fill (``@layer base { !important }``) outranks the reskin regardless of when the @tailwindcss/browser@4 runtime settles. Why a sublayer of ``utilities``: daisyUI's CDN build nests all its components in ``utilities.daisyui.*`` and lets the layer's DIRECT rules (the real utility classes) beat those sublayers. Sitting in ``utilities.senguru-reskin`` — pinned after ``utilities.daisyui`` by the inline ``@layer`` statement at the top of base.html's — the reskin overrides daisyUI components (its purpose) but loses to Tailwind utility classes (``hidden``, ``p-*``, ``mb-*``…), as utilities should. Author rules here as complete component styles; never rely on beating a utility. ``daisyui-theme.css`` must stay UNLAYERED: it only sets [data-theme] custom properties, and daisyUI's themes.css sets the same tokens on :root unlayered — an unlayered declaration beats any layered one, so layering the token file would hand the brand palette back to daisyUI's light theme. Unlayered-vs-unlayered resolves by source order, which this file wins because it loads after themes.css. */ @import "colors_and_type.css" layer(utilities.senguru-reskin); @import "daisyui-theme.css"; @import "senguru-daisyui.css" layer(utilities.senguru-reskin); @import "behaviour-log.css" layer(utilities.senguru-reskin); /* ─────────────────────────── Dark-mode overrides ─────────────────────────── colors_and_type.css + senguru-daisyui.css bake in light surfaces. Under the dark theme, re-point them to the themed daisyUI tokens (which daisyui-theme.css sets to their dark values for [data-theme="senguru-dark"]). Same layer as the component kit they correct: they only need to beat the kit (later in the layer → they do), never the app's own CSS. */ @layer utilities.senguru-reskin { /* ─────────────────────────── Typography adjustments ───────────────────────── App-tuned sizes over the kit defaults: smaller display headings on a clean descending scale (28 → 22 → 20 → 18 → 16 px), body kept at 1rem, and no link underlines. The whole scale is overridden — not just h1/h2 — so h3+ don't end up larger than the shrunk h1/h2. Inside the reskin layer (like the rest of the reskin) so the app's own CSS still wins; later in the layer than the imported kit, so these beat the kit's heading/link defaults. */ html, body { font-size: 1rem; } h1 { font-size: var(--t-2xl); /* 28px (was --t-4xl / 44px) */ } h2 { font-size: var(--t-xl); /* 22px (was --t-3xl / 36px) */ } h3 { font-size: 1.25rem; /* 20px (was --t-2xl / 28px) */ } h4 { font-size: var(--t-lg); /* 18px (was --t-xl / 22px) */ } h5 { font-size: var(--t-md); /* 16px (was --t-lg / 18px) */ } /* The kit resets heading margins to 0 — give headings a small default gap below so they don't crowd the next element when no spacing utility is present (since #1107, mb-* utilities beat this default again, as they should). Card titles are exempt: the roomier card-body gap below handles their spacing (and a title inside an icon row ignores its own margin anyway). */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.4rem; } .card-title { margin-bottom: 0; } .card-body { gap: 0.75rem; /* was daisyUI 0.5rem — titles were crowding text */ } a, a:hover { text-decoration: none; } /* ──────────────────── Missing semantic button variants ───────────────────── The vendored kit themes primary/secondary/error/accent/outline/ghost/link but the app also uses .btn-success / .btn-info / .btn-warning (#1099). Mirror the kit's .btn-primary treatment (solid fill, white ink, hover lift, press on :active, pale disabled) from the kit's own semantic tokens. Solid brand fills read correctly on the dark theme too, so — like the kit's primary/secondary — they need no [data-theme="senguru-dark"] override. */ .btn-success { background: var(--success); color: #fff; box-shadow: var(--shadow-sm); } .btn-success:hover { background: var(--guru-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-success:active { transform: scale(.98); box-shadow: var(--shadow-sm); } .btn-success:disabled, .btn-success.btn-disabled, .btn-success[disabled] { background: var(--guru-300); color: rgba(255,255,255,.92); } .btn-info { background: var(--info); color: #fff; box-shadow: var(--shadow-sm); } .btn-info:hover { background: var(--sen-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-info:active { transform: scale(.98); box-shadow: var(--shadow-sm); } .btn-info:disabled, .btn-info.btn-disabled, .btn-info[disabled] { background: var(--sen-300); color: rgba(255,255,255,.92); } /* Dev-only ("Dev login", ENABLE_DEV_LOGIN) — fill uses --warning-btn, not the lighter --warning token: white text on --warning is 2.94:1, below WCAG AA's 4.5:1 (#1327). Never reaches production. */ .btn-warning { background: var(--warning-btn); color: #fff; box-shadow: var(--shadow-sm); } .btn-warning:hover { background: #7f5819; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-warning:active { transform: scale(.98); box-shadow: var(--shadow-sm); } .btn-warning:disabled, .btn-warning.btn-disabled, .btn-warning[disabled] { background: #e4c98f; color: rgba(255,255,255,.92); } /* ─────────────────────── Narrow-viewport padding trim ────────────────────── The kit's compact sizes are roomier than daisyUI's (.btn-sm 8px/14px, .btn-xs 5px/10px, .badge .34rem/.7rem) which overflows the follow-up action row at the 320 px viewport (#1099; guarded by tests/playwright/test_followup_overflow_e2e.py). Trim inline padding and gaps below 360 px so compact rows fit without changing their one-line layout on wider screens. */ @media (max-width: 360px) { .btn-sm { padding: 8px 9px; gap: 5px; } .btn-xs { padding: 5px 6px; gap: 4px; letter-spacing: 0; } .badge { padding: .3rem .45rem; gap: 4px; } } /* Icon buttons: daisyUI's .btn-circle / .btn-square are meant to be tight, padding-free, square-aspect icon buttons, but the kit's generic .btn padding + 14px radius turn them into padded rounded rectangles — visible on the modal close (✕) buttons. Restore the icon-button shape. Still needed after #1107: .btn-circle lives in daisyUI's ``utilities.daisyui`` sublayer, which this layer deliberately outranks — the #1107 reorder only handed the *direct utility rules* the win. (The chat FAB opts out of .btn entirely, see _chat_widget.html.) */ .btn-circle, .btn-square { padding: 0; } .btn-circle { border-radius: 9999px; } .btn-square { border-radius: var(--radius-field); } /* ──────────────────────────── Inputs & form fields ───────────────────────── The design system's field spec (inputs.html): white fields on the cream page, a 1.5px paper hairline, and a SEN-blue focus ring. The reskin theme already gives inputs Nunito + a 10px radius (--radius-field); daisyUI's default fill is base-100 (cream), which reads as cream-on-cream, so the key fix is the white surface plus the branded focus / error states. Covers the daisyUI input family the app uses: input / textarea / select / file-input (the *-bordered variants are the same elements). */ .input, .textarea, .select, .file-input { background-color: #fff; border-width: 1.5px; border-color: var(--paper-3); } .input:focus, .input:focus-within, .textarea:focus, .textarea:focus-within, .select:focus, .select:focus-within, .file-input:focus, .file-input:focus-within { outline: none; border-color: var(--sen-400); box-shadow: 0 0 0 3px color-mix(in oklch, var(--sen-400) 35%, transparent); } /* Error state: daisyUI's *-error classes, tinted to the warm danger palette. */ .input-error, .textarea-error, .select-error { border-color: var(--danger); background-color: var(--danger-bg); } /* ─────────────────────────── Upload drop-zone (.sg-drop) ──────────────────── The design system's upload.html "card": a friendly dashed drop-zone with a soft radial wash and an upload glyph. Not in the vendored kit, so it lives here. Used as a