/* ============================================================ The Greenhouse — Mrs. P Creations founder back office Danielle's own space, deliberately NOT the customer palette. Two moods (her pick, 2026-07-13): light = "Terracotta study" — kraft linen, terracotta, arches dark = "Evening greenhouse" — espresso, lamplight, cream serif data-gh="light|dark" on ; default follows the system. Components read the same semantic tokens in both moods. ============================================================ */ :root{ --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif; --font-serif:"Lora",ui-serif,Georgia,serif; --font-hand:"Caveat",ui-serif,cursive; --sh:32,24,14; --shadow-xs:0 1px 2px rgba(var(--sh)/.06); --shadow-sm:0 1px 4px rgba(var(--sh)/.06),0 1px 2px rgba(var(--sh)/.04); --shadow-md:0 4px 14px rgba(var(--sh)/.08),0 2px 4px rgba(var(--sh)/.04); --shadow-lg:0 12px 28px rgba(var(--sh)/.10),0 4px 8px rgba(var(--sh)/.05); --shadow-xl:0 24px 48px rgba(var(--sh)/.13),0 8px 16px rgba(var(--sh)/.06); --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:22px; --radius-pill:999px; --ease:cubic-bezier(.4,0,.2,1); --t:160ms var(--ease); } /* ---- light · Terracotta study ---- */ :root, :root[data-gh="light"]{ --bg:#EFE3D3; --bg-soft:#F6EDE0; --bg-sunk:#E6D7C2; --surface:#FFFBF4; --surface-alt:#F8EFE2; --fg:#33291C; --fg-muted:#6B5B4A; --fg-subtle:#8C7A66; --border:#E2D2BB; --border-strong:#C9B393; --border-subtle:#EADDC9; --brand-50:#F8EDE4; --brand-100:#F3DFD3; --brand-200:#E8CBBA; --brand-300:#D9AE96; --brand-400:#C98B6E; --brand-500:#BF7A5C; --brand-600:#B7654D; --brand-700:#8A4B36; --brand-800:#5E3222; --num:#8A4B36; --glow:rgba(183,101,77,.07); --nav-on-ink:#FFFFFF; --toast-bg:#5E3222; --toast-fg:#FFF8F0; --ok-fg:#715F50; --ok-bg:#F2EADC; --ok-border:#D2BFA4; --warn-fg:#8A6E2F; --warn-bg:#F4ECD8; --info-fg:#4F6A78; --info-bg:#DEE6EA; --err-fg:#8E4F44; --err-bg:#F2DDD7; --terra:#B7654D; --terra-50:#F7E9E4; --side-bg:rgba(250,243,232,.85); --panel-bg:rgba(255,251,244,.9); --botanical-o:.12; } /* ---- dark · Evening greenhouse ---- */ :root[data-gh="dark"]{ --bg:#241B14; --bg-soft:#2A211A; --bg-sunk:#1D1611; --surface:#2E241B; --surface-alt:#33281E; --fg:#F2EADC; --fg-muted:#C9B8A2; --fg-subtle:#96836C; --border:#3E3227; --border-strong:#4E3F30; --border-subtle:#362B20; --brand-50:#332821; --brand-100:#3D2E23; --brand-200:#4A3729; --brand-300:#6E4E3B; --brand-400:#9A6A50; --brand-500:#B57258; --brand-600:#C97B5D; --brand-700:#DA9B7F; --brand-800:#EAD9BF; --num:#EAD9BF; --glow:rgba(201,123,93,.09); --nav-on-ink:#241B14; --toast-bg:#EAD9BF; --toast-fg:#33281E; --ok-fg:#D2BFA4; --ok-bg:#33291C; --ok-border:#6E4E3B; --warn-fg:#DFC182; --warn-bg:#342B18; --info-fg:#9EC0D2; --info-bg:#22303A; --err-fg:#E0A79B; --err-bg:#352420; --terra:#C97B5D; --terra-50:#3D2E23; --side-bg:rgba(36,27,20,.82); --panel-bg:rgba(46,36,27,.92); --botanical-o:.07; --sh:0,0,0; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font-sans);color:var(--fg);font-size:15.5px;line-height:1.6; -webkit-font-smoothing:antialiased;font-optical-sizing:auto; background:var(--bg); } /* lamplight — a soft warm radial from the upper right, both moods */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(900px 520px at 68% 0%, var(--glow), transparent 70%)} body > *{position:relative;z-index:1} h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.18;letter-spacing:-.01em;color:var(--fg)} button{font-family:var(--font-sans);cursor:pointer;border:none;background:none} a{color:inherit;text-decoration:none} svg.gh{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* ===== shell ===== */ .shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px; padding:26px 18px 20px;background:var(--side-bg);backdrop-filter:blur(9px) saturate(1.05); border-right:1px solid var(--border)} .side-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:4px 6px 18px;border-bottom:1px dashed var(--border-strong);margin-bottom:12px} .side-brand .leaf{width:40px;height:40px;border-radius:50%;background:var(--brand-100);border:1px solid var(--brand-200); display:flex;align-items:center;justify-content:center;color:var(--brand-700)} .side-brand .leaf svg{width:21px;height:21px} .side-brand h1{font-size:20px} .side-brand .sub{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)} .nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:10.5px 13px;border-radius:var(--radius-lg); font-size:14px;font-weight:600;color:var(--fg-muted);transition:background var(--t),color var(--t);text-align:left} .nav-item:hover{background:var(--brand-50);color:var(--fg)} .nav-item.on{background:var(--brand-600);color:var(--nav-on-ink);box-shadow:var(--shadow-sm)} .nav-item.soon{opacity:.45;cursor:default} .nav-item.soon:hover{background:none;color:var(--fg-muted)} .nav-item .tag{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--fg-subtle);background:var(--bg-sunk);border-radius:var(--radius-pill);padding:2px 7px} .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px dashed var(--border-strong)} .side-foot .who{font-size:12.5px;color:var(--fg-subtle);text-align:center} .btn-quiet{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:var(--radius-pill); font-size:13px;font-weight:600;color:var(--fg-muted);border:1px solid var(--border-strong);background:var(--surface); transition:all var(--t)} .btn-quiet:hover{border-color:var(--brand-400);color:var(--fg)} .main{padding:44px 52px 60px;min-width:0} @media (max-width:860px){ .shell{grid-template-columns:1fr} .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center} .side-brand{flex-direction:row;border:none;margin:0;padding:0 10px 0 0} .side-foot{margin:0;border:none;padding:0;flex-direction:row} .main{padding:26px 20px 44px} } /* ===== porch ===== */ .porch-head{margin-bottom:30px} .porch-head .date{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-600);margin-bottom:8px} .porch-head h2{font-size:38px} .porch-head .mood{font-size:15.5px;color:var(--fg-muted);margin-top:8px;max-width:560px} .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:34px} .tile{background:var(--panel-bg);backdrop-filter:blur(7px);border:1px solid var(--border);border-radius:var(--radius-xl); padding:18px 20px;box-shadow:var(--shadow-sm)} .tile .k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:6px;display:flex;align-items:center;gap:7px} .tile .k svg{width:14px;height:14px;color:var(--brand-600)} .tile .v{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--num);line-height:1.05} .tile .d{font-size:12px;color:var(--fg-subtle);margin-top:4px} .waiting{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--radius-xl);padding:18px 22px;margin-bottom:34px} .waiting .wt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700);margin-bottom:8px;display:flex;align-items:center;gap:8px} .waiting ul{list-style:none;display:flex;flex-direction:column;gap:6px} .waiting li{font-size:14px;color:var(--fg-muted)} .waiting li a{font-weight:600;color:var(--brand-700);text-decoration:underline;text-underline-offset:2px} .waiting .calm{font-size:14px;color:var(--fg-muted)} .doors-t{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:12px} .doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .door{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--panel-bg);backdrop-filter:blur(7px); border:1px solid var(--border);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-sm); transition:transform var(--t),box-shadow var(--t),border-color var(--t);text-align:left} .door:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-300)} .door.soon{opacity:.55} .door.soon:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border)} .door .ic{width:38px;height:38px;border-radius:var(--radius-lg);background:var(--brand-100);color:var(--brand-700); display:flex;align-items:center;justify-content:center;margin-bottom:4px} .door .ic svg{width:19px;height:19px} .door h3{font-size:18.5px} .door p{font-size:13.5px;color:var(--fg-muted);line-height:1.5} .door .soon-tag{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--fg-subtle);background:var(--bg-sunk);border-radius:var(--radius-pill);padding:3px 8px} /* ===== login / private-garden gate ===== */ .gatepage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px} .gatecard{width:min(430px,100%);background:var(--panel-bg);backdrop-filter:blur(10px);border:1px solid var(--border); border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:42px 38px;text-align:center} .gatecard .leaf{width:54px;height:54px;border-radius:50%;background:var(--brand-100);border:1px solid var(--brand-200); display:flex;align-items:center;justify-content:center;color:var(--brand-700);margin:0 auto 16px} .gatecard .leaf svg{width:26px;height:26px} .gatecard h1{font-size:27px;margin-bottom:6px} .gatecard .sub{font-size:14.5px;color:var(--fg-muted);margin-bottom:26px} .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 18px; border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface); font-size:15px;font-weight:600;color:var(--fg);box-shadow:var(--shadow-xs);transition:all var(--t)} .btn-google:hover{border-color:var(--brand-400);box-shadow:var(--shadow-sm)} .btn-google img{width:18px;height:18px} .gate-note{font-size:12.5px;color:var(--fg-subtle);margin-top:18px;line-height:1.55} .gate-err{display:none;font-size:13.5px;color:var(--err-fg);background:var(--err-bg);border-radius:var(--radius-md);padding:10px 14px;margin-top:16px} /* ===== toast ===== */ .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;pointer-events:none} .toast{display:flex;align-items:center;gap:9px;background:var(--toast-bg);color:var(--toast-fg);border-radius:var(--radius-pill); padding:11px 20px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px); transition:opacity var(--t),transform var(--t)} .toast.show{opacity:1;transform:none} .toast svg{width:16px;height:16px} /* ===== potting bench ===== */ .bench-ruler{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;background:var(--brand-50);border:1px dashed var(--border-strong); border-radius:var(--radius-lg);padding:12px 18px;margin-bottom:26px} .br-item{font-size:12.5px;color:var(--fg-muted)} .br-item b{color:var(--fg);font-weight:700} .br-link{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand-700);text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .bench-group{margin-bottom:34px} .bench-gt{display:flex;align-items:center;gap:10px;margin-bottom:2px} .bench-gt h3{font-size:21px} .bench-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px; border-radius:var(--radius-pill);background:var(--brand-100);color:var(--brand-800);font-size:12px;font-weight:800} .bench-gs{font-size:13.5px;color:var(--fg-subtle);margin-bottom:14px} .bench-list{display:flex;flex-direction:column;gap:14px} .bench-card{display:grid;grid-template-columns:190px 1fr;gap:18px;background:var(--panel-bg);backdrop-filter:blur(7px); border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:16px;align-items:center} @media (max-width:640px){.bench-card{grid-template-columns:1fr}} .bench-thumb{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-sunk); display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle)} .bench-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center} .bench-noimg{font-size:12px;color:var(--fg-subtle);font-weight:600} .bench-meta{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:3px} .bench-info h4{font-family:var(--font-serif);font-size:18.5px;font-weight:600;margin-bottom:3px} .bench-price{font-size:14px;font-weight:700;color:var(--brand-700);margin-bottom:11px} .bench-actions{display:flex;flex-wrap:wrap;gap:8px} .btn-quiet.primary{background:var(--brand-600);color:var(--nav-on-ink);border-color:var(--brand-600)} .btn-quiet.primary:hover{background:var(--brand-500);border-color:var(--brand-500);color:var(--nav-on-ink)} .btn-quiet[disabled]{opacity:.5;cursor:default} /* flip-through overlay */ .bench-pv{position:fixed;inset:0;z-index:120;background:rgba(45,36,26,.55);display:flex;align-items:center;justify-content:center;padding:22px} .bench-pv[hidden]{display:none} .bench-pv-inner{width:min(760px,100%);max-height:94vh;background:var(--bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl); display:flex;flex-direction:column;overflow:hidden} .bpv-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-soft);border-bottom:1px solid var(--border)} .bpv-no{font-size:13px;font-weight:600;color:var(--fg-subtle);padding:0 6px} .bpv-stage{overflow:auto;padding:24px;background:var(--bg-sunk);display:flex;justify-content:center} .bpv-stage img{width:100%;max-width:620px;height:auto;border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-md);background:#fff} /* ===== trellis ===== */ /* the coverage table sits on a SOLID surface — the frosted panel over the lamplight glow made the grid feel noisy (Danielle 2026-07-13) */ #trellisBody .card{background:var(--surface);backdrop-filter:none} .trellis-grid td{border-top:1px solid var(--border-subtle)} .trellis-grid{width:100%;border-collapse:collapse;font-size:13px} .trellis-grid th{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle);padding:7px 9px;text-align:center} .trellis-grid td{padding:7px 9px;text-align:center;border-top:1px dashed var(--border)} .tg-subj{font-weight:700;color:var(--fg);text-align:left!important;white-space:nowrap} .tg-cell.has{background:var(--brand-100);color:var(--brand-800);font-weight:800;border-radius:var(--radius-sm)} .tg-cell.gap{color:var(--border-strong)} .trellis-occ{display:inline-flex;margin:0 8px 8px 0;padding:6px 13px;border-radius:var(--radius-pill);background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-800);font-size:13px;font-weight:700} /* ===== ledger ===== */ .ledger-tbl{width:100%;border-collapse:collapse;font-size:14px} .ledger-tbl td{padding:10px 8px;border-top:1px dashed var(--border)} .ledger-tbl tr:first-child td{border-top:none} .lg-title{font-weight:600;color:var(--fg)} .lg-via{color:var(--fg-subtle);font-size:13px} .lg-when{color:var(--fg-subtle);font-size:13px;text-align:right;white-space:nowrap} /* ===== guest book ===== */ .gb-input{width:100%;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-lg); font-family:var(--font-sans);font-size:15px;color:var(--fg);background:var(--surface);outline:none} .gb-input:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-100)} .gb-match{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;margin-top:8px; border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:border-color var(--t)} .gb-match:hover{border-color:var(--brand-400)} .gb-match b{font-size:14.5px} .gb-match span{font-size:13px;color:var(--fg-subtle)} .gb-since{margin-left:auto;white-space:nowrap} .gb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px} .gb-sub{font-size:13.5px;color:var(--fg-subtle);margin-top:3px} .gb-plan{flex-shrink:0;padding:7px 15px;border-radius:var(--radius-pill);background:var(--brand-100); border:1px solid var(--brand-200);color:var(--brand-800);font-size:13px;font-weight:800} .gb-line{font-size:14px;color:var(--fg-muted);padding:3px 0} /* ===== mailroom ===== */ .mail-card{margin-bottom:16px} .mail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px} .mail-trig{font-size:13px;color:var(--fg-subtle);margin-top:4px;max-width:520px;line-height:1.5} .mail-tag{flex-shrink:0;padding:5px 12px;border-radius:var(--radius-pill);background:var(--bg-sunk);color:var(--fg-subtle);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .mail-tag.on{background:var(--brand-100);border:1px solid var(--brand-200);color:var(--brand-800)} .mail-line{font-size:14px;color:var(--fg-muted)} .mail-edit{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .mail-f{display:flex;flex-direction:column;gap:4px} .mail-f span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle)} .mail-f input{padding:10px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:14.5px;color:var(--fg);background:var(--surface);outline:none} .mail-f input:focus{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-100)} .mail-edit .btn-quiet{align-self:flex-start} .mail-pv-t{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:8px} .mail-pv{width:100%;height:520px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#F5F0E8} /* ===== room shared ===== */ .room-head{margin-bottom:26px} .room-head .crumb{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-600);margin-bottom:6px} .room-head h2{font-size:31px} .room-head .sub{font-size:14.5px;color:var(--fg-muted);margin-top:6px;max-width:620px} .card{background:var(--panel-bg);backdrop-filter:blur(7px);border:1px solid var(--border);border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);padding:22px} .empty{padding:40px 22px;text-align:center;color:var(--fg-muted);font-size:14.5px} .spin{display:inline-block;width:17px;height:17px;border:2px solid var(--brand-200);border-top-color:var(--brand-600);border-radius:50%;animation:gh-spin .7s linear infinite;vertical-align:-3px} @keyframes gh-spin{to{transform:rotate(360deg)}} /* ============================================================ Mood signatures light · Terracotta study: glasshouse arches + italic greeting dark · Evening greenhouse: lamplight (body::before) + settled shadows Both: a faint botanical sprig in the corner (#botanical in index.html) ============================================================ */ :root:not([data-gh="dark"]) .tile{border-top:2px solid var(--brand-600)} :root:not([data-gh="dark"]) .door{border-radius:60px 60px var(--radius-xl) var(--radius-xl);padding-top:26px;text-align:center} :root:not([data-gh="dark"]) .door .ic{margin:0 auto 4px;border-radius:50%} :root:not([data-gh="dark"]) .door .soon-tag{top:16px;right:16px} :root:not([data-gh="dark"]) .gatecard{border-radius:110px 110px var(--radius-2xl) var(--radius-2xl);padding-top:54px} #botanical{position:fixed;right:-30px;bottom:-40px;width:330px;opacity:var(--botanical-o);pointer-events:none;color:var(--brand-600);z-index:0} .mode-toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:var(--radius-pill); font-size:13px;font-weight:600;color:var(--fg-muted);border:1px solid var(--border-strong);background:var(--surface);transition:all var(--t)} .mode-toggle:hover{border-color:var(--brand-400);color:var(--fg)} /* ============================================================ Porch v2 — fewer cards, more picture. ============================================================ */ .porch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .quick-doors{display:flex;gap:10px;flex-wrap:wrap;padding-top:8px} .quick-door{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill); font-size:13.5px;font-weight:700;color:var(--brand-700);background:var(--surface);border:1px solid var(--border-strong); box-shadow:var(--shadow-xs);transition:all var(--t)} .quick-door:hover{border-color:var(--brand-400);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .quick-door svg{width:15px;height:15px} .pv2-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:16px} .pv2-col{display:flex;flex-direction:column;gap:16px} .card-t{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:12px} .card-t svg{width:15px;height:15px;color:var(--brand-600)} /* map */ .map-card{display:flex;flex-direction:column} .map-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px} #ontMap{width:100%;max-width:520px;height:auto} #ontMap .ont{fill:var(--bg-sunk);stroke:var(--border-strong);stroke-width:1.4;stroke-linejoin:round} :root[data-gh="dark"] #ontMap .ont{fill:#2E241B;stroke:#4E3F30} #ontMap .dot{fill:var(--brand-600);stroke:var(--surface);stroke-width:1.4;animation:dot-in .5s var(--ease) backwards} #ontMap .dot-pulse{fill:var(--brand-600);opacity:.16;animation:pulse 2.6s var(--ease) infinite} @keyframes dot-in{from{transform:scale(0);transform-origin:center;transform-box:fill-box}to{transform:scale(1)}} @keyframes pulse{0%,100%{opacity:.10}50%{opacity:.26}} .map-foot{font-size:13.5px;color:var(--fg-muted);padding-top:10px;border-top:1px dashed var(--border)} .map-foot b{font-family:var(--font-serif);font-size:19px;color:var(--num)} /* earnings — the one saturated card (terracotta), like a lit window */ .earn-card{background:var(--brand-600);border-color:var(--brand-600);color:#fff} :root[data-gh="dark"] .earn-card{color:#241B14} .earn-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:8px} .earn-v{font-family:var(--font-serif);font-size:34px;font-weight:600;line-height:1} .earn-d{font-size:12px;opacity:.8;margin:6px 0 14px} #earnChart{width:100%;height:96px;display:block} .earn-line{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.95} .earn-dot{fill:currentColor;stroke:var(--brand-600);stroke-width:2} .earn-months{display:flex;justify-content:space-between;font-size:11px;font-weight:700;opacity:.8;padding:6px 4px 0} /* garden numbers — one card, three stats */ .g-stats{display:flex;gap:8px} .g-stat{flex:1;text-align:center;padding:10px 6px;border-radius:var(--radius-lg);background:var(--brand-50)} .g-stat b{display:block;font-family:var(--font-serif);font-size:27px;font-weight:600;color:var(--num);line-height:1.1} .g-stat span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--fg-subtle)} /* today card: quote · calendar · to-dos */ .today-card{margin-bottom:8px} .today-grid{display:grid;grid-template-columns:1.2fr .9fr 1.1fr;gap:26px} .tq blockquote{font-family:var(--font-serif);font-style:italic;font-size:18.5px;line-height:1.5;color:var(--fg);text-wrap:pretty} .tq cite{display:block;font-style:normal;font-size:13px;color:var(--fg-subtle);margin-top:10px} .cal-head{font-family:var(--font-serif);font-size:15.5px;font-weight:600;margin-bottom:8px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .cal-dow{font-size:10px;font-weight:800;color:var(--fg-subtle);padding:3px 0} .cal-d{font-size:12px;color:var(--fg-muted);padding:4.5px 0;border-radius:50%} .cal-d.today{background:var(--brand-600);color:var(--nav-on-ink);font-weight:800} .todo-list{display:flex;flex-direction:column;gap:7px;max-height:172px;overflow-y:auto;margin-bottom:10px} .todo{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg)} .todo.done span{color:var(--fg-subtle);text-decoration:line-through} .todo-tick{width:21px;height:21px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface); display:flex;align-items:center;justify-content:center;transition:all var(--t)} .todo.done .todo-tick{background:var(--brand-600);border-color:var(--brand-600);color:var(--nav-on-ink)} .todo-tick svg{width:11px;height:11px} .todo span{flex:1;min-width:0;overflow-wrap:break-word} .todo-x{color:var(--fg-subtle);font-size:17px;line-height:1;padding:2px 5px;opacity:0;transition:opacity var(--t)} .todo:hover .todo-x{opacity:1} .todo-empty{font-size:13.5px;color:var(--fg-subtle)} .todo-form{display:flex;gap:8px} .todo-form input{flex:1;min-width:0;padding:9px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-pill); font-family:var(--font-sans);font-size:13.5px;color:var(--fg);background:var(--surface);outline:none} .todo-form input:focus{border-color:var(--brand-400)} .todo-form .btn-quiet{padding:8px 15px} /* entrance: gentle stagger */ .pv2-in{animation:pv2in .5s var(--ease) backwards} .pv2-in:nth-child(2){animation-delay:.06s} .pv2-grid .pv2-in:nth-child(1){animation-delay:.10s} .pv2-col .pv2-in:nth-child(1){animation-delay:.16s} .pv2-col .pv2-in:nth-child(2){animation-delay:.22s} .today-card{animation:pv2in .5s var(--ease) .28s backwards} @keyframes pv2in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .pv2-in,.today-card,#ontMap .dot,#ontMap .dot-pulse{animation:none} } /* phone */ @media (max-width:900px){ .pv2-grid{grid-template-columns:1fr} .today-grid{grid-template-columns:1fr;gap:20px} .map-wrap{min-height:220px} .porch-head h2{font-size:30px} } /* her book mark, theme-aware */ .brand-mark{width:56px;height:auto;margin-bottom:2px} .brand-mark-lg{width:84px;height:auto;margin:0 auto 14px;display:block} .mark-dark{display:none} :root[data-gh="dark"] .mark-light{display:none} :root[data-gh="dark"] .mark-dark{display:block} /* ============================================================ Round-3 additions: handwriting quote, collapsible rail, 3D map ============================================================ */ /* handwriting daily quote, under the greeting (Modern Teacher pattern) */ .porch-head{align-items:flex-start} .ph-l{max-width:640px} .gh-quote{margin-top:10px} .gh-quote .dq-text{font-family:var(--font-hand);font-size:26px;line-height:1.32;font-weight:500;color:var(--fg-muted);letter-spacing:.004em} .gh-quote .dq-author{font-family:var(--font-hand);font-size:20px;font-weight:600;color:var(--fg-subtle);white-space:nowrap} :root[data-gh="dark"] .gh-quote .dq-text{color:var(--brand-800)} /* today card now two columns (calendar + to-dos); quote lives up top */ .today-grid{grid-template-columns:.9fr 1.1fr} @media (max-width:900px){.today-grid{grid-template-columns:1fr}} /* ---- collapsible sidebar ---- */ .side{position:relative} .side-collapse{position:absolute;top:16px;right:-13px;width:26px;height:26px;border-radius:50%; background:var(--surface);border:1px solid var(--border-strong);color:var(--fg-muted);z-index:5; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs);transition:all var(--t)} .side-collapse:hover{border-color:var(--brand-400);color:var(--fg)} .side-collapse .chev{width:15px;height:15px;transition:transform var(--t)} .shell{transition:grid-template-columns var(--t)} .shell.nav-collapsed{grid-template-columns:76px 1fr} .shell.nav-collapsed .side{padding:26px 12px 20px;align-items:center} .shell.nav-collapsed .side-collapse .chev{transform:rotate(180deg)} .shell.nav-collapsed .brand-mark{width:40px} .shell.nav-collapsed .side-brand h1, .shell.nav-collapsed .side-brand .sub, .shell.nav-collapsed .nav-lbl, .shell.nav-collapsed .side-foot .who, .shell.nav-collapsed .mode-toggle span{display:none} .shell.nav-collapsed .side-brand{border-bottom:none;padding-bottom:8px;margin-bottom:8px} .shell.nav-collapsed .nav-item{justify-content:center;padding:11px} .shell.nav-collapsed .nav-item .tag{display:none} .shell.nav-collapsed .btn-quiet, .shell.nav-collapsed .mode-toggle{padding:9px;width:44px;justify-content:center;gap:0} .shell.nav-collapsed .btn-quiet .nav-lbl{display:none} @media (max-width:860px){.side-collapse{display:none}} /* ---- 3D animated map ---- */ .map-wrap{perspective:1100px;perspective-origin:60% 20%} .map-3d{position:relative;width:100%;max-width:520px;transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.2,1);transform:rotateX(9deg) rotateY(-2deg); animation:map-float 9s ease-in-out infinite} @keyframes map-float{0%,100%{transform:rotateX(9deg) rotateY(-2deg) translateY(0)}50%{transform:rotateX(9deg) rotateY(-2deg) translateY(-6px)}} .map-3d:hover{animation-play-state:paused} #ontMap{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 12px 14px rgba(32,24,14,.18))} :root[data-gh="dark"] #ontMap{filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))} /* extruded base layer sits behind + below for depth */ #ontMap .ont-under{fill:var(--brand-300);stroke:none;transform:translate(3px,9px);opacity:.55} :root[data-gh="dark"] #ontMap .ont-under{fill:#1A130C;opacity:.9} #ontMap .ont{fill:var(--bg-sunk);stroke:var(--border-strong);stroke-width:1.4;stroke-linejoin:round} :root[data-gh="dark"] #ontMap .ont{fill:#2E241B;stroke:#4E3F30} .map-shadow{position:absolute;left:8%;right:8%;bottom:-4px;height:26px;border-radius:50%; background:radial-gradient(ellipse at center, rgba(32,24,14,.20), transparent 72%); transform:translateZ(-40px);filter:blur(3px)} :root[data-gh="dark"] .map-shadow{background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 72%)} #ontMap .dot{fill:var(--brand-600);stroke:var(--surface);stroke-width:1.4;animation:dot-in .5s var(--ease) backwards;filter:drop-shadow(0 3px 3px rgba(32,24,14,.3))} #ontMap .dot-pulse{fill:var(--brand-600);opacity:.16;animation:pulse 2.6s var(--ease) infinite} @keyframes dot-in{from{transform:scale(0);transform-origin:center;transform-box:fill-box}to{transform:scale(1)}} @keyframes pulse{0%,100%{opacity:.10}50%{opacity:.26}} @media (prefers-reduced-motion: reduce){.map-3d{animation:none}} /* ===== brand mark (round 4) ===== */ .brand-gh{--gLN:var(--brand-700);--gWF:var(--brand-50);--gWR:var(--brand-100);--gRL:var(--brand-100);--gRR:var(--brand-200);--gPL:var(--brand-700);width:56px;height:auto} :root[data-gh="dark"] .brand-gh{--gWF:transparent;--gWR:transparent;--gRL:transparent;--gRR:rgba(201,123,93,.14);--gLN:#E3B48F;--gPL:#C97B5D} .brand-name{font-family:"Rokkitt",serif;font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:16px;color:var(--fg);line-height:1;margin-top:9px} .brand-word{width:86px;height:auto;margin-top:6px} :root[data-gh="dark"] .brand-word{filter:brightness(0) invert(.88) sepia(.28) saturate(1.5) hue-rotate(-8deg)} .shell.nav-collapsed .brand-name,.shell.nav-collapsed .brand-word{display:none} .shell.nav-collapsed .brand-gh{width:40px} .gatecard .brand-gh{width:90px;margin:0 auto 4px} .gatecard .brand-name{font-size:22px;margin-top:6px} /* ===== Ledger revenue split (#16) ===== */ .ledger-rev{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-bottom:16px} .revcard{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px 22px;box-shadow:var(--shadow-sm)} .revcard.master{background:var(--brand-600);border-color:var(--brand-600);color:#fff} :root[data-gh="dark"] .revcard.master{color:#241B14} .rc-k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:8px} .revcard.master .rc-k{color:inherit;opacity:.85} .rc-v{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--num);line-height:1} .revcard.master .rc-v{color:inherit;font-size:34px} .rc-d{font-size:12px;color:var(--fg-subtle);margin-top:6px} .revcard.master .rc-d{color:inherit;opacity:.8} @media (max-width:760px){.ledger-rev{grid-template-columns:1fr}} /* ===== top sellers / highest rated (#17) ===== */ .sell-list{display:flex;flex-direction:column} .sell-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--border-subtle)} .sell-row:first-child{border-top:none} .sell-thumb{width:58px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunk);border:1px solid var(--border);display:flex;align-items:center;justify-content:center} .sell-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center} .sell-noimg svg{width:18px;height:18px;color:var(--brand-500);stroke-width:1.6} .sell-info{flex:1;min-width:0} .sell-title{font-size:14.5px;font-weight:600;color:var(--fg);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sell-meta{display:flex;align-items:center;gap:12px;margin-top:3px;font-size:12.5px;color:var(--fg-subtle)} .sell-price{font-weight:800;color:var(--brand-700)} .sell-stars{display:inline-flex;align-items:center;gap:2px} .sell-stars .st{color:var(--border-strong);font-size:12px} .sell-stars .st.on{color:var(--star,#C99A3F)} .sell-stars b{margin-left:4px;color:var(--fg-muted);font-weight:700} .sell-sales{margin-left:auto;font-weight:600} /* ===== Guest Book — communication-log style (#18) ===== */ .gb-layout{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start} .gb-rail{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:20px} .gb-search{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border-subtle)} .gb-search svg{width:16px;height:16px;color:var(--fg-subtle);flex-shrink:0} .gb-input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--font-sans);font-size:14px;color:var(--fg)} .gb-list{max-height:60vh;overflow-y:auto;padding:6px} .gb-hint,.gb-hint2{font-size:13px;color:var(--fg-subtle);padding:14px} .gb-contact{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--radius-lg);text-align:left;transition:background var(--t)} .gb-contact:hover{background:var(--brand-50)}.gb-contact.on{background:var(--brand-600);color:var(--nav-on-ink)} .gb-av{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800} .gb-contact.on .gb-av{background:rgba(255,255,255,.25);color:var(--nav-on-ink)} .gb-av.lg{width:54px;height:54px;font-size:19px} .gb-ct{display:flex;flex-direction:column;min-width:0} .gb-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gb-mail{font-size:12px;color:var(--fg-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gb-contact.on .gb-mail{color:inherit;opacity:.85} .gb-feed{display:flex;flex-direction:column;gap:14px} .gb-blank{padding:60px 24px;text-align:center;color:var(--fg-subtle)} .gb-blank svg{width:26px;height:26px;margin:0 auto 12px;color:var(--brand-400);stroke-width:1.5;display:block} .gb-entry{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:20px 22px} .gb-profile{display:flex;align-items:flex-start;gap:16px} .gb-pname{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--fg);line-height:1.15} .gb-pmeta{font-size:13px;color:var(--fg-subtle);margin-top:3px} .gb-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .gb-plan{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:capitalize;color:var(--nav-on-ink);background:var(--brand-600);border-radius:var(--radius-pill);padding:4px 12px} .gb-chip{font-size:12px;font-weight:600;color:var(--fg-muted);background:var(--bg-sunk);border-radius:var(--radius-pill);padding:4px 11px} .gb-et{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:12px} .gb-rows{display:flex;flex-direction:column} .gb-row{display:grid;grid-template-columns:1.2fr 1.6fr auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--border-subtle);font-size:13.5px} .gb-row:first-child{border-top:none} .gb-r1{font-weight:600;color:var(--fg)}.gb-r2{color:var(--fg-muted)}.gb-r3{color:var(--fg-subtle);white-space:nowrap} @media (max-width:820px){.gb-layout{grid-template-columns:1fr}.gb-rail{position:static}} /* ===== calendar widget (#20) ===== */ .cal-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .cal-title{display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--fg)} .cal-title svg{width:16px;height:16px;color:var(--brand-600)} .cal-nav{display:flex;align-items:center;gap:4px} .cal-arrow{min-width:30px;height:30px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--fg-muted);font-size:15px;font-weight:600;transition:all var(--t)} .cal-arrow:hover{border-color:var(--brand-400);color:var(--fg)} .cal-arrow.today-btn{font-size:12.5px} .cal-views{margin-left:auto;display:inline-flex;background:var(--bg-sunk);border-radius:var(--radius-pill);padding:3px} .cal-vbtn{padding:6px 14px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;color:var(--fg-muted);transition:all var(--t)} .cal-vbtn.on{background:var(--brand-600);color:var(--nav-on-ink);box-shadow:var(--shadow-xs)} /* month */ .cal-grid.month{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal-grid.month .cal-dow{text-align:center;font-size:10.5px;font-weight:800;color:var(--fg-subtle);padding-bottom:4px} .cal-cell{aspect-ratio:1.35;border-radius:var(--radius-md);border:1px solid transparent;background:var(--bg-soft);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:6px 8px;transition:all var(--t);position:relative} .cal-cell.blank{background:none;pointer-events:none} .cal-cell:hover{border-color:var(--brand-300)} .cal-cell .cd-n{font-size:12.5px;font-weight:600;color:var(--fg-muted)} .cal-cell.today{background:var(--brand-50);border-color:var(--brand-300)} .cal-cell.today .cd-n{color:var(--brand-700);font-weight:800} .cal-cell.sel{border-color:var(--brand-600)} .cd-dots{display:flex;gap:3px;margin-top:auto} .cd-dots i{width:5px;height:5px;border-radius:50%;background:var(--brand-600)} .cd-dots i.done{background:var(--border-strong)} /* week */ .cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .wk-col{background:var(--bg-soft);border-radius:var(--radius-md);min-height:120px;display:flex;flex-direction:column;overflow:hidden} .wk-col.today{background:var(--brand-50);outline:1px solid var(--brand-300)} .wk-h{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-bottom:1px solid var(--border-subtle)} .wk-h b{font-size:10px;font-weight:800;color:var(--fg-subtle);text-transform:uppercase} .wk-h span{font-size:14px;font-weight:700;color:var(--fg)} .wk-body{padding:6px 5px;display:flex;flex-direction:column;gap:4px} .wk-pill{text-align:left;font-size:11px;line-height:1.25;color:var(--fg);background:var(--brand-100);border-radius:5px;padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wk-pill.done{opacity:.5;text-decoration:line-through} .wk-empty{color:var(--fg-subtle);text-align:center;font-size:12px;padding:4px} /* day */ .cal-day{display:grid;grid-template-columns:1fr 1fr;gap:20px} .day-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:9px} /* add form */ .cal-add{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)} .cal-add #calText{flex:1;min-width:0;padding:9px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:13.5px;color:var(--fg);background:var(--surface);outline:none} .cal-add #calText:focus{border-color:var(--brand-400)} .cal-add #calDate{padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:12.5px;color:var(--fg-muted);background:var(--surface);outline:none} .cal-add .btn-quiet{padding:8px 16px} @media (max-width:760px){.cal-day{grid-template-columns:1fr}.cal-week{grid-template-columns:repeat(7,1fr);font-size:10px}.cal-views{margin-left:0}} /* ===== Trellis · Command Centre matrix (#19) ===== */ .tr-tabs{display:flex;align-items:center;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);padding-bottom:2px} .tr-tab{padding:9px 16px;font-size:14px;font-weight:600;color:var(--fg-muted);border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative;top:1px} .tr-tab.on{color:var(--brand-700);border-bottom:2px solid var(--brand-600)} .tr-tab:hover{color:var(--fg)} .tr-synced{margin-left:auto;font-size:12px;color:var(--fg-subtle)} .tr-layout{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start} .tr-rail{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:16px 16px 18px;position:sticky;top:20px} .tr-prog{padding-bottom:14px;margin-bottom:12px;border-bottom:1px dashed var(--border)} .tr-prog-t,.tr-rt{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:9px} .tr-rt{margin:14px 0 8px} .tr-bar{height:8px;border-radius:var(--radius-pill);background:var(--bg-sunk);overflow:hidden;margin-bottom:9px} .tr-bar span{display:block;height:100%;background:var(--brand-600);border-radius:var(--radius-pill)} .tr-legend{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--fg-muted)} .tr-legend span{display:flex;align-items:center;gap:6px}.tr-legend b{margin-left:auto;color:var(--fg);font-weight:700} .tr-legend .dot{width:8px;height:8px;border-radius:50%}.dot.ready{background:var(--brand-600)}.dot.prog{background:var(--brand-300)} .tr-check{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13.5px;color:var(--fg-muted);cursor:pointer} .tr-check input{accent-color:var(--brand-600)}.tr-check b{margin-left:auto;font-size:11px;color:var(--fg-subtle);font-weight:700} .tr-pill{display:inline-block;margin:0 6px 6px 0;padding:5px 12px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;color:var(--fg-muted);border:1px solid var(--border-strong);background:var(--surface)} .tr-pill.on{background:var(--brand-600);color:var(--nav-on-ink);border-color:var(--brand-600)} .tr-search{margin-top:12px} .tr-search input{width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:13px;color:var(--fg);background:var(--surface);outline:none} .tr-search input:focus{border-color:var(--brand-400)} .tr-main{min-width:0} /* matrix */ .mx-group{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:6px 20px 14px;margin-bottom:16px} .mx-gh{display:flex;align-items:center;gap:9px;font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--fg);padding:14px 0 10px;border-bottom:1px solid var(--border-subtle);margin-bottom:6px} .mx-gh svg{width:16px;height:16px;color:var(--brand-600)} .mx-gn{margin-left:auto;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--fg-subtle)} .mx-strand{display:flex;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--border-subtle)} .mx-strand:first-child{border-top:none} .mx-sname{flex:1;min-width:120px;font-size:13.5px;font-weight:600;color:var(--fg)} .mx-chips{display:flex;gap:4px;flex-wrap:wrap} .mx-chip{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700} .mx-chip.on{background:var(--brand-600);color:var(--nav-on-ink)} .mx-chip.gap{background:var(--bg-sunk);color:var(--fg-subtle);opacity:.6} .mx-count{font-size:12.5px;font-weight:700;color:var(--fg-subtle);white-space:nowrap;width:38px;text-align:right} /* atlas */ .atlas{width:100%;border-collapse:collapse;font-size:13px} .atlas th{font-size:11px;font-weight:700;color:var(--fg-subtle);padding:6px;text-align:center} .atlas .at-s{text-align:left;font-weight:600;color:var(--fg);padding:6px 12px 6px 4px;white-space:nowrap} .atlas .at-c{text-align:center;border:2px solid var(--surface);border-radius:6px;height:38px} .atlas .at-c .lit{color:#fff;font-weight:700} .at-note{font-size:12px;color:var(--fg-subtle);margin-top:12px} @media (max-width:820px){.tr-layout{grid-template-columns:1fr}.tr-rail{position:static}} /* ===== moveable Porch widgets + map cities ===== */ .pw-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start} .pw{position:relative;flex:1 1 340px;animation:pv2in .45s var(--ease) backwards} .pw.map-card{flex:1 1 500px} .pw.earn-card{flex:1 1 300px} .pw.garden-card{flex:1 1 280px} .pw.sellers-card{flex:1 1 340px} .pw.cal-card{flex:1 1 100%} .pw.dragging{opacity:.5;outline:2px dashed var(--brand-400);outline-offset:2px} .pw-grip{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--fg-subtle);cursor:grab;opacity:0;transition:opacity var(--t),background var(--t);z-index:4} .pw:hover .pw-grip{opacity:.55} .pw-grip:hover{opacity:1;background:var(--bg-sunk)} .pw-grip:active{cursor:grabbing} .pw-grip svg{width:15px;height:15px;fill:currentColor;stroke:none} .pw-grip.lite{color:rgba(255,255,255,.92)} :root[data-gh="dark"] .pw-grip.lite{color:rgba(36,27,20,.75)} .pw-grip.lite:hover{background:rgba(255,255,255,.2)} :root[data-gh="dark"] .pw-grip.lite:hover{background:rgba(36,27,20,.18)} /* city labels reveal on map hover */ .city-dot{fill:var(--brand-500);opacity:.5} .city-lbl{font-family:var(--font-sans);font-size:7px;font-weight:600;fill:var(--fg-muted);opacity:0;transition:opacity .18s ease;pointer-events:none;paint-order:stroke;stroke:var(--surface);stroke-width:.7px} .map-3d:hover .city-lbl{opacity:.9} .city:hover .city-dot{opacity:1;fill:var(--brand-700)} .city:hover .city-lbl{opacity:1;font-weight:800;fill:var(--brand-700)}