/* Shared between console and mobile — extracted 2026-07-13. Only the design tokens and rules verified byte-identical across both files (via diff) live here. Most component classes that look similar between the two apps (.tag/.tag2, .btn, calendar cells, etc.) are NOT here on purpose — they were independently tuned per app (desktop-dense vs touch-friendly sizing), and forcing a shared class would risk visibly changing one app to satisfy the other. */ /* ── Design tokens · LIGHT (default) ───────────────────────────────────────── Dark mode is delivered as token overrides below. Components are styled through these tokens; hardcoded UI hexes across both apps were converted to var(--token,#fallback) so the fallback keeps light byte-identical while dark only redefines the tokens. Manual choice (data-theme on , stamped from localStorage before first paint by shared.js) wins over the OS media query in both directions via the higher-specificity attribute selectors. */ :root{ color-scheme:light; --eo:cubic-bezier(.25,.46,.45,.94); /* power1.out ≈ easeOutQuad — the shared motion ease (theme-independent) */ --bg:#f6f5f0; --card:#ffffff; --fill:#f3f2ec; --fill2:#efeee7; --ink:#1b1e21; --ink2:#43494f; --muted:#71797f; --line:#e7e5dc; --line2:#d9d6cb; --accent:#0e7a6f; --accent-ink:#0a5c54; --accent-soft:#e2f1ee; --accent-border:#bcdcd6; --accent-deep:#0c3b35; --red:#c43a53; --red-soft:#f9e9ed; --red-strong:#a52741; --amber:#9a6a10; --amber-soft:#f6efdb; --green:#1a7a48; --green-soft:#e4f2e9; --blue:#39638f; --blue-soft:#e8eef5; --on-accent:#ffffff; --file-pdf:#d64545; --file-doc:#2f6fdb; --file-img:#1f8b4c; --bucket-academic:#39638f;--bucket-maintenance:#b06e12;--bucket-construction:#8a6a52;--bucket-hr:#a34d78;--bucket-accounts:#1a7a48;--bucket-administration:#5d6672;--bucket-transport:#0e7a8f;--bucket-it:#5b5ea6;--bucket-default:#5d6672; } /* Dark palette — kept in one macro applied to both the OS-preference media query and the explicit data-theme="dark" selector. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#14171a; --card:#1c2024; --fill:#242a2f; --fill2:#20262b; --ink:#e9ebe8; --ink2:#c4cac5; --muted:#98a29d; --line:#2b3137; --line2:#333a41; --accent:#2fa891; --accent-ink:#57c3ad; --accent-soft:#16261f; --accent-border:#2c463f; --accent-deep:#66cdb7; --red:#e0607a; --red-soft:#2c1a20; --red-strong:#ef7a90; --amber:#d9a441; --amber-soft:#2b2414; --green:#46b876; --green-soft:#152820; --blue:#6ea8e0; --blue-soft:#16222e; --on-accent:#0a2420; --file-pdf:#e75f5f; --file-doc:#5f95e6; --file-img:#3fb872; --bucket-academic:#6ea8e0;--bucket-maintenance:#d99a3e;--bucket-construction:#c39d80;--bucket-hr:#d67fa8;--bucket-accounts:#46b876;--bucket-administration:#99a3b1;--bucket-transport:#3fb2c6;--bucket-it:#9095db;--bucket-default:#99a3b1; --sh-sm:0 1px 2px rgba(0,0,0,.40); --sh-md:0 6px 18px rgba(0,0,0,.46); --sh-lg:0 26px 64px rgba(0,0,0,.62); --sh:0 4px 14px rgba(0,0,0,.42); } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#14171a; --card:#1c2024; --fill:#242a2f; --fill2:#20262b; --ink:#e9ebe8; --ink2:#c4cac5; --muted:#98a29d; --line:#2b3137; --line2:#333a41; --accent:#2fa891; --accent-ink:#57c3ad; --accent-soft:#16261f; --accent-border:#2c463f; --accent-deep:#66cdb7; --red:#e0607a; --red-soft:#2c1a20; --red-strong:#ef7a90; --amber:#d9a441; --amber-soft:#2b2414; --green:#46b876; --green-soft:#152820; --blue:#6ea8e0; --blue-soft:#16222e; --on-accent:#0a2420; --file-pdf:#e75f5f; --file-doc:#5f95e6; --file-img:#3fb872; --bucket-academic:#6ea8e0;--bucket-maintenance:#d99a3e;--bucket-construction:#c39d80;--bucket-hr:#d67fa8;--bucket-accounts:#46b876;--bucket-administration:#99a3b1;--bucket-transport:#3fb2c6;--bucket-it:#9095db;--bucket-default:#99a3b1; --sh-sm:0 1px 2px rgba(0,0,0,.40); --sh-md:0 6px 18px rgba(0,0,0,.46); --sh-lg:0 26px 64px rgba(0,0,0,.62); --sh:0 4px 14px rgba(0,0,0,.42); } /* Print always renders on white paper — pin the light palette regardless of the active screen theme so PDFs/printouts never inherit dark tokens. */ @media print{ :root, :root[data-theme="dark"], :root[data-theme="light"]{ color-scheme:light; --bg:#f6f5f0; --card:#ffffff; --fill:#f3f2ec; --fill2:#efeee7; --ink:#1b1e21; --ink2:#43494f; --muted:#71797f; --line:#e7e5dc; --line2:#d9d6cb; --accent:#0e7a6f; --accent-ink:#0a5c54; --accent-soft:#e2f1ee; --accent-border:#bcdcd6; --accent-deep:#0c3b35; --red:#c43a53; --red-soft:#f9e9ed; --red-strong:#a52741; --amber:#9a6a10; --amber-soft:#f6efdb; --green:#1a7a48; --green-soft:#e4f2e9; --blue:#39638f; --blue-soft:#e8eef5; --on-accent:#ffffff; --file-pdf:#d64545; --file-doc:#2f6fdb; --file-img:#1f8b4c; --bucket-academic:#39638f;--bucket-maintenance:#b06e12;--bucket-construction:#8a6a52;--bucket-hr:#a34d78;--bucket-accounts:#1a7a48;--bucket-administration:#5d6672;--bucket-transport:#0e7a8f;--bucket-it:#5b5ea6;--bucket-default:#5d6672; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} button{font-family:inherit} .thumb{width:46px;height:46px;border-radius:7px;object-fit:cover;border:1px solid var(--line);cursor:pointer} .filechip-wrap{display:inline-flex;align-items:center;gap:8px} .filechip-wrap a{display:inline-flex;color:inherit;text-decoration:none} .dlicon{color:var(--muted);opacity:.65;padding:11px;border:none;background:none;display:inline-flex;cursor:pointer} .dlicon:hover{opacity:1;color:var(--ink)} .dlicon .i{width:15px;height:15px} #err-overlay{position:fixed;inset:auto 12px 12px 12px;background:#fff3f3;border:2px solid #c43a53;border-radius:10px;padding:14px;font:12px/1.5 monospace;color:#7a1f30;z-index:999;display:none;white-space:pre-wrap} /* ── Shared motion layer (v182) ─────────────────────────────────────────────── Account/dropdown menus scale+fade from their corner on open. Menus mount fresh each time they open, so a plain mount animation fires once with no JS. */ @keyframes tfPop{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}} .tf-pop{transform-origin:top right;animation:tfPop .18s var(--eo,ease)} /* Task-complete checkmark — an SVG check that strokes on when the box becomes checked. Uses a transition (not an animation) keyed to the checked class, so it fires on the open→done flip but shows instantly for items already-done at mount (no state change = no transition on first paint). Applied to the checklist checkbox (.kchk console / .tf-cbx mobile). */ .tf-check{width:64%;height:64%;display:block;pointer-events:none} .tf-check path{fill:none;stroke:var(--on-accent,#fff);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:23;stroke-dashoffset:23;transition:stroke-dashoffset .3s var(--eo,ease)} .kchk.on .tf-check path,.tf-cbx.tf-checked .tf-check path{stroke-dashoffset:0} /* Global reduced-motion off-switch — reveals show instantly, no count-up/draw-on, all transitions/animations collapse. tf-motion.js also guards this in JS. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important} .tf-pop{animation:none!important} }