/* ═══════════════════════════════════════════════════════════════════════════ Lease Tracker — Compound Real Estate brand system. Tokens are lifted from compoundrealestate.com, using the site's own variable names where they exist: --themeBlack #211f1f --themeWhite #fff --themeBeige #ccb091 deep forest #0b4722 darkest green #081c15 green accent #4ea66d greys #848484 #9e9e9e #f5f5f5 #eeeeee #e5e5e5 Montserrat, radii 8 / 16 / 999px WHY BEIGE IS NOT THE BUTTON COLOUR: #ccb091 on white is ~2:1 contrast and fails WCAG for text. On the real site it is an accent RULE — a 2px hover underline — and that is the role it keeps here. Interactive weight goes to the deep forest, which is on-brand and passes AA. The beige is what makes the page recognisably Compound; the green is what makes it usable. DARK MODE IS THE ADMIN APP ONLY. share.html never loads a dark block, so a client's page matches the website in every OS setting. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --bg:#f5f5f5; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f0efed; --line:#e5e5e5; --line-strong:#d6d4d1; --text:#211f1f; --muted:#848484; --faint:#9e9e9e; --brand:#0b4722; --brand-deep:#081c15; --brand-soft:#eaf1ec; --accent:#ccb091; --accent-soft:#f7f1ea; --good:#4ea66d; --good-deep:#2f7d4c; --warn:#b45309; --warn-soft:#fdf3e7; --bad:#b3261e; --shadow:0 1px 3px rgba(33,31,31,.07), 0 1px 2px rgba(33,31,31,.04); --shadow-lg:0 16px 48px rgba(8,28,21,.22); --r:8px; --r-card:16px; --r-pill:999px; --safe-b:env(safe-area-inset-bottom,0px); --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color-scheme:light; } /* The admin app opts in by setting data-app on . share.html does not, so a client never gets a dark page no matter what their device is set to. */ @media (prefers-color-scheme: dark){ html[data-app="1"]{ --bg:#141414; --surface:#1c1b1b; --surface-2:#232221; --surface-3:#2b2928; --line:#2e2c2c; --line-strong:#3d3a39; --text:#f2f0ee; --muted:#9e9e9e; --faint:#787472; --brand:#4ea66d; --brand-deep:#081c15; --brand-soft:#1b2b21; --accent:#ccb091; --accent-soft:#2a2520; --good:#4ea66d; --warn-soft:#33260f; --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 16px 48px rgba(0,0,0,.65); color-scheme:dark; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font:15px/1.45 var(--font); -webkit-font-smoothing:antialiased; } button{font:inherit;color:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font:inherit;color:inherit} a{color:var(--brand)} [hidden]{display:none !important} /* ── Shared atoms ───────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:9px 16px;border-radius:var(--r);background:var(--surface-2); border:1px solid var(--line);font-size:13px;font-weight:600;letter-spacing:.01em; white-space:nowrap;transition:background .12s linear,border-color .12s linear; } .btn:hover{background:var(--surface-3)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover{background:var(--brand-deep)} .btn.danger{color:var(--bad);border-color:var(--line)} .btn.ghost{background:transparent} .btn:disabled{opacity:.45;pointer-events:none} .btn.sm{padding:6px 11px;font-size:12px} .icon-btn{ width:34px;height:34px;flex:0 0 auto;border-radius:var(--r); display:grid;place-items:center;color:var(--muted);background:transparent; } .icon-btn:hover{background:var(--surface-3);color:var(--text)} .icon-btn svg{width:17px;height:17px} .chip{ display:inline-flex;align-items:center;gap:5px; padding:4px 11px;border-radius:var(--r-pill); background:var(--surface-2);border:1px solid var(--line); font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted); white-space:nowrap; } .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} .chip.st-new{} .chip.st-shortlist{background:var(--accent-soft);border-color:var(--accent);color:#8a6d47} .chip.st-approved{background:var(--brand);border-color:var(--brand);color:#fff} .chip.st-passed,.chip.st-withdrawn{opacity:.6} .pill-count{ display:inline-flex;align-items:center;gap:6px;padding:5px 12px; border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line); font-size:12px;font-weight:700;color:var(--muted); } .pill-count.done{background:var(--brand-soft);border-color:var(--good);color:var(--good-deep)} .progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .progress > i{display:block;height:100%;background:var(--good);transition:width .25s ease} .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r-card);box-shadow:var(--shadow); } .muted{color:var(--muted)} .faint{color:var(--faint)} .num{font-variant-numeric:tabular-nums} /* The beige rule — the site's signature accent, used the same way here. */ .rule{height:2px;background:var(--accent);border-radius:2px} /* ── Candidate grid ─────────────────────────────────────────────────────── */ /* grid-template-columns is emitted from the field registry at render time, so hidden columns leave no gap and the identity column is always first. */ .cand-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch} .cand{ display:grid;min-width:max-content; background:var(--surface); border:1px solid var(--line);border-radius:var(--r-card); overflow:hidden; } .cand > .c{ padding:9px 10px;font-size:13px;display:flex;align-items:center; height:38px;overflow:hidden; } /* One line per cell, always. A wrapped cell changes the row height, and a table with ragged rows stops being scannable down a column — which is the entire reason this is a table and not a list of cards. */ .cand > .c > .t{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .cand > .c.right{justify-content:flex-end} .cand > .hd{ position:sticky;top:0;z-index:3; background:var(--surface-3);color:var(--muted); font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; border-bottom:1px solid var(--line-strong); height:auto;min-height:40px;padding-top:7px;padding-bottom:7px; } /* Headers are the ONE place text may wrap. The share view uses the full labels ("Employment Letter", not "Ltr") because the client doesn't know Derek's shorthand — and those don't fit a column sized for the shorthand. Wrapping the header costs one row of height; truncating it costs the reader the meaning. */ .cand > .hd > .t{white-space:normal;line-height:1.25;overflow:visible} /* The identity column stays readable no matter how far right you scroll — the same technique the pm-board gantt uses for its label column. */ .cand > .sticky{ position:sticky;left:0;z-index:2; background:inherit; box-shadow:1px 0 0 var(--line); } .cand > .hd.sticky{z-index:4;background:var(--surface-3)} /* Blocks alternate at the HOUSEHOLD level. That does the grouping work zebra stripes would have done, instead of fighting it. */ .cand > .b0{background:var(--surface)} .cand > .b1{background:var(--surface-2)} .cand > .hh{font-weight:700;border-top:1px solid var(--line-strong)} .cand > .sub{font-size:12.5px;color:var(--muted)} .cand > .sub.name{padding-left:26px;position:relative} .cand > .sub.name::before{ content:"";position:absolute;left:14px;top:0;bottom:50%; border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong); width:7px; } .cand > .last{border-bottom:1px solid var(--line)} .hh-name{display:flex;align-items:center;gap:8px;min-width:0} .hh-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hh-plus{font-size:11px;font-weight:700;color:var(--muted);flex:0 0 auto} .caret{width:16px;flex:0 0 auto;color:var(--faint);font-size:10px;text-align:center;cursor:pointer} .grip{flex:0 0 auto;color:var(--faint);cursor:grab;touch-action:none;padding:0 2px} .grip:active{cursor:grabbing} /* The applied checkbox. Empty circle -> filled green tick. */ .check{ width:19px;height:19px;flex:0 0 auto;border-radius:50%; border:1.5px solid var(--line-strong);background:transparent; display:grid;place-items:center;font-size:11px;color:transparent; transition:background .12s linear,border-color .12s linear; } .check:hover{border-color:var(--muted)} .check.on{background:var(--good);border-color:var(--good);color:#fff} /* The un-applied strip. ONE element spanning the whole application region. Eight empty cells read as "Derek hasn't filled this in"; this reads as "this candidate hasn't applied." Same pixels, opposite meaning. */ .cand > .strip{ color:var(--muted);font-size:12.5px;gap:12px;justify-content:space-between; background:repeating-linear-gradient( -45deg, transparent 0 9px, rgba(132,132,132,.05) 9px 18px); } /* Long free text lives here, OUTSIDE the horizontal scroll region, so reading a note never involves scrolling sideways. */ .cand > .drawer{ grid-column:1 / -1;position:sticky;left:0; padding:2px 14px 14px;background:inherit; } .note-box{ background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r); padding:11px 13px;max-width:820px; } .note-box h5{ margin:0 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--muted); } .note-box p{margin:0 0 10px;font-size:13px;line-height:1.5;white-space:pre-wrap} .note-box p:last-child{margin-bottom:0} .note-badge{ font-size:10.5px;font-weight:700;color:var(--accent); border-bottom:1.5px solid var(--accent);cursor:pointer; } .band{ grid-column:1 / -1;position:sticky;left:0; padding:9px 14px;background:var(--surface-3); font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);border-top:1px solid var(--line-strong);cursor:pointer; } /* ── Card layout (phone, and any share with <=4 columns) ────────────────── */ .cards{display:flex;flex-direction:column;gap:11px} .hcard{padding:13px 14px} .hcard .top{display:flex;align-items:center;gap:9px;margin-bottom:3px} .hcard .top .nm{flex:1;min-width:0;font-weight:700;font-size:15px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hcard .metric{font-weight:800;font-size:15px;white-space:nowrap} .hcard .sub{font-size:12.5px;color:var(--muted);margin-bottom:9px} /* Standalone, NOT nested under .hcard — the task list uses it too, and scoping it to the card left every task row unstyled. */ .strip-row{ display:flex;align-items:center;gap:10px;font-size:13px; padding:6px 0;border-top:1px dashed var(--line); } .hcard .strip-row{align-items:baseline;font-size:12.5px;padding:4px 0} .strip-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hcard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .hcard .foot{display:flex;align-items:center;gap:8px;margin-top:10px} /* ── Utilities ──────────────────────────────────────────────────────────── */ .row{display:flex;align-items:center;gap:8px} .row.wrap{flex-wrap:wrap} .spacer{flex:1} .empty{ padding:44px 20px;text-align:center;color:var(--muted);font-size:14px; }