/* * Spray Sheets — shared design tokens and component CSS * Import on every Spray Sheets screen (mobile + desktop). * Google Fonts tags must be in each page's (not @import, to avoid FOUT). * * Tokens defined here are disjoint from --sr-* vars in sr-shell.css. */ /* ── Design tokens ──────────────────────────────────────────────── */ :root { /* Surfaces — warm stone */ --paper: #EAE7DB; --paper-2: #F1EFE5; --card: #FFFFFF; --card-2: #F6F4EA; --card-sink: #EFEDE1; /* Ink — warm near-black */ --ink: #1A1F18; --ink-2: #4B5247; --ink-3: #828877; /* Lines */ --line: #DCD9CA; --line-2: #C8C5B3; /* Brand greens */ --forest: #13301D; --green-900: #1B3F28; --green: #2E6C39; --green-bright:#409D4F; --lime: #C7D85E; --lime-deep: #A6B941; --olive: #6E7A2E; /* Earth + status */ --clay: #BE6130; --go: #2F7D42; --go-soft: #E4EEDE; --caution: #C2871F; --caution-soft: #F3E9CF; --hold: #BC3A2D; --hold-soft: #F2DBD5; --sky: #3D6E86; --sky-soft: #DEE9EC; /* Effects */ --shadow: 0 1px 2px rgba(26,31,24,.05), 0 8px 24px rgba(26,31,24,.07); --shadow-lg: 0 2px 6px rgba(26,31,24,.08), 0 18px 44px rgba(26,31,24,.13); /* Typography stacks */ --mono: 'IBM Plex Mono', ui-monospace, monospace; --cond: 'Barlow Semi Condensed', sans-serif; --body: 'Barlow', sans-serif; } /* ── Type utilities ─────────────────────────────────────────────── */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ── Interaction ────────────────────────────────────────────────── */ .tap { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; } .tap:active { transform: scale(.985); } .row { display: flex; align-items: center; } /* ── Section title ──────────────────────────────────────────────── */ .sec-title { font-family: var(--cond); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } /* ── Verdict color mappings (set --vc / --vcs) ──────────────────── */ .verdict-go { --vc: var(--go); --vcs: var(--go-soft); } .verdict-caution { --vc: var(--caution); --vcs: var(--caution-soft); } .verdict-hold { --vc: var(--hold); --vcs: var(--hold-soft); } /* ── Disease level color mappings (set --dz / --dzs) ───────────── */ .dz-low { --dz: var(--go); --dzs: var(--go-soft); } .dz-mod { --dz: var(--caution); --dzs: var(--caution-soft); } .dz-high { --dz: var(--hold); --dzs: var(--hold-soft); } /* Desktop level helpers (set --lc / --lcs) */ .lv-low { --lc: var(--go); --lcs: var(--go-soft); } .lv-mod { --lc: var(--caution); --lcs: var(--caution-soft); } .lv-high { --lc: var(--hold); --lcs: var(--hold-soft); } /* ── Status chips ───────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .chip.synced { background: var(--go-soft); color: var(--go); } .chip.pending { background: var(--caution-soft); color: #9a6a13; } .chip.progress { background: var(--sky-soft); color: var(--sky); } .chip.planned { background: var(--card-sink); color: var(--ink-3); } .chip.exec { background: #E4E2F5; color: #5B4FB2; } /* ── Delta T scale bar ──────────────────────────────────────────── */ .scale { position: relative; height: 9px; border-radius: 6px; overflow: hidden; display: flex; } .scale i { flex: 1; height: 100%; } .scale .z-lo { background: #D9C98F; } .scale .z-ok { background: #7FB46A; } .scale .z-hi { background: #D79A6E; } .scale-marker { position: absolute; top: 50%; width: 3px; height: 17px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 0 2.5px var(--card); } /* ── Live freshness pulse ───────────────────────────────────────── */ .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(47,125,66,.5); animation: pulse 2.2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,125,66,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,125,66,0); } 100% { box-shadow: 0 0 0 0 rgba(47,125,66,0); } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } /* ── Compass arrow ──────────────────────────────────────────────── */ .compass { width: 14px; height: 14px; display: inline-block; color: var(--sky); } /* ── Primary CTA button ─────────────────────────────────────────── */ .cta { width: 100%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 11px; border-radius: 16px; white-space: nowrap; font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--green-900); box-shadow: 0 2px 0 #0d2715, var(--shadow); transition: transform .1s ease, box-shadow .1s ease; } .cta:active { transform: translateY(2px); box-shadow: 0 0 0 #0d2715, var(--shadow); } .cta .plus { width: 26px; height: 26px; border-radius: 8px; background: var(--lime); color: var(--green-900); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; font-family: var(--cond); line-height: 0; } /* ── Record row (shared mobile + desktop activity log) ──────────── */ .rec { display: flex; align-items: center; gap: 12px; padding: 13px 14px; } .rec-prop { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: var(--card-sink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .rec-prop b { font-family: var(--cond); font-weight: 800; font-size: 17px; color: var(--green); } .rec-prop span { font-family: var(--cond); font-weight: 700; font-size: 9px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; } .rec-main { flex: 1; min-width: 0; } .rec-main .t { font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rec-main .s { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .rec-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } .rec-end .ha { font-family: var(--mono); font-weight: 600; font-size: 14px; } /* ── Disease shared components ──────────────────────────────────── */ .dz-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--dzs, var(--go-soft)); color: var(--dz, var(--go)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dz-level { font-family: var(--cond); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--dz, var(--go)); padding: 4px 11px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } .dz-trend { display: flex; align-items: flex-end; gap: 3px; height: 18px; } .dz-trend i { width: 5px; border-radius: 2px; background: var(--line-2); } .dz-trend i.on { background: var(--dz, var(--go)); } .dz-trend-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } .dz-trend-note { font-family: var(--cond); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--dz, var(--go)); white-space: nowrap; } /* ── Mini disease level pill ────────────────────────────────────── */ .mini { flex-shrink: 0; font-family: var(--cond); font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 7px; background: var(--dzs, var(--go-soft)); color: var(--dz, var(--go)); } /* ── Execution status pills ─────────────────────────────────────── */ .exec { flex-shrink: 0; font-family: var(--cond); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; height: 19px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; } .exec.planned { background: var(--card-sink); color: var(--ink-2); } .exec.progress { background: var(--go-soft); color: var(--go); } /* ── Schedule label colours (shared) ───────────────────────────── */ .pl-overdue { color: var(--hold); } .pl-today { color: var(--caution); } .pl-tomorrow { color: var(--olive); } .pl-future { color: var(--ink-3); } /* ── Desktop level pill (table) ─────────────────────────────────── */ .lvl-pill { font-family: var(--cond); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--lc); background: var(--lcs); padding: 3px 10px; border-radius: 7px; white-space: nowrap; flex-shrink: 0; }