/* Construction Planner — PWA styles Design language carried from the desktop app: dark navy, vibrant accents, bold text, no pale fills, no emojis, no left-edge stripes. */ :root { /* Warm CREAM + bright-YELLOW theme: soft cream page, white cards, brighter golden-yellow accent, warm near-black text, muted forest green for good news. Rounded + friendly. */ --bg: #f4f2ea; /* warm cream page background */ --bg-2: #f0ede3; /* warm inset (input fields, tab tracks) */ --panel: #ffffff; /* white cards */ --panel-2: #f6f3ea; /* warm light (ghost buttons, hover, file chips) */ --line: #e7e2d5; /* warm border */ --text: #1c1a12; /* warm near-black text */ --muted: #8a8474; /* warm grey */ --accent: #f5c53c; /* bright golden yellow (FILLS: nav, buttons, headers, active) */ --accent-2: #eab928; /* slightly deeper yellow (hover) */ --ink-on-accent: #1c1a12; /* dark text sits on yellow fills */ --accent-ink: #9c7a12; /* readable amber for accent TEXT on cream (links, timestamps) */ --green: #3f9a52; /* muted forest green (success) */ --green-d: #2f7a3f; --amber: #e0952a; --red: #dc4b3e; --radius: 16px; --shadow: 0 3px 14px rgba(28, 26, 18, 0.06); } * { box-sizing: border-box; } /* html/body must be the SAME full-screen height as #root, otherwise (with overflow:hidden) they clip the bottom of a taller #root — which cut off the tab-bar labels. In the installed PWA that's 100vh (=full physical screen, 912 on the user's device); in Safari it's 100dvh (visible area, no clip). */ html, body { margin: 0; padding: 0; height: 100dvh; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no document scroll → no iOS rubber-band moving the header; an inner container scrolls instead. text-size-adjust stops iOS inflating fonts after a landscape→portrait rotation */ @media all and (display-mode: standalone) { html, body { height: 100vh; } } html.is-standalone, html.is-standalone body { height: 100vh; } /* White so iOS rubber-band overscroll + safe areas stay white. */ html { background: var(--bg); } body { /* Warm cream — flat (sleek, avoids iOS repaint jank). */ background: var(--bg); color: var(--text); font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; min-height: 100dvh; touch-action: manipulation; /* kill the tap delay */ -webkit-tap-highlight-color: transparent; /* Safe areas are handled by the chrome that touches each edge (the header pads the top, the planner tab bar pads the bottom) so the app fills the screen edge-to-edge. */ } /* THE bottom-bar fix (after on-device probing): in the INSTALLED PWA, iOS reports innerHeight/100dvh as a viewport ~68px SHORTER than the real screen (measured: dvh/svh/innerHeight=844 but vh/lvh=912), so a bar pinned to that short viewport floated above the home indicator with a dead strip below it. 100vh/100lvh = the FULL physical screen, so in standalone we size #root with 100vh and let the bar sit at the true bottom as a normal flex child. In Safari we keep 100dvh (the visible area above the bottom URL bar). is-standalone class is a fallback for older iOS that lacks the display-mode query. */ #root { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } @media all and (display-mode: standalone) { #root { height: 100vh; } } html.is-standalone #root { height: 100vh; } /* When the planner iframe is mounted, pin #root to the real viewport with a DEFINITE height so the iframe's `height:100%` (styles.css ~189) resolves. Without this the flex children can't size the frame and the whole shell mislays out — the header floats mid-screen (worst on short-content roles like the subcontractor Tasks view). This is the rule the comment near .planner-frame relies on. */ #root:has(.planner-frame) { position: fixed; inset: 0; height: auto; } /* The project view uses the same flex shell as the dashboard (#root height:100% flex column, overflow hidden). The tab bar is a normal flex child at the bottom (NOT position:fixed — that was unreliable on iOS: gaps + jumping after rotation). header(flex:none) + iframe(flex:1) + tabbar(flex:none). */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; margin: 0; } button { font-family: inherit; font-weight: 700; cursor: pointer; } input, select { font-family: inherit; font-weight: 600; } a { color: var(--accent-ink); text-decoration: none; } .hidden { display: none !important; } /* Full-screen markup: the planner iframe asks the shell to drop its chrome so the editor uses the whole screen. Container is flex:1, so hiding the header + tab bar makes the iframe fill the viewport. */ html.mk-fullscreen .app-header, html.mk-fullscreen .proj-statusbar, html.mk-fullscreen .app-tabbar { display: none !important; } /* …and make the iframe itself go edge-to-edge — otherwise its desktop border/rounded corners + the container padding leave a cream frame around the editor (it wasn't reaching the real screen edges). */ html.mk-fullscreen .container { padding: 0 !important; max-width: none !important; gap: 0 !important; } html.mk-fullscreen .container .page-head { display: none !important; } html.mk-fullscreen .planner-frame { height: 100dvh !important; min-height: 0 !important; border: none !important; border-radius: 0 !important; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--text); border-radius: 14px; padding: 11px 18px; font-size: 14px; font-weight: 700; color: var(--ink-on-accent); background: var(--accent); transition: transform .06s ease, background .15s ease; } .btn:hover { background: var(--accent-2); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.ghost { background: var(--panel); border-color: var(--line); color: var(--text); } .btn.green { background: var(--green); color: #fff; border-color: var(--green-d); } .btn.danger { background: transparent; border-color: var(--red); color: var(--red); } .btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 11px; } .btn.block { width: 100%; } /* ---------- Inputs ---------- */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; } input[type=text], input[type=email], input[type=password], select { width: 100%; padding: 12px 13px; border-radius: 10px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); font-size: 15px; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,197,60,.25); } /* ---------- Auth screen ---------- */ .auth-wrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); } .auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } /* Account-deletion farewell — sad Rusty, centered. */ .farewell-card { text-align: center; } .fw-art { display: flex; justify-content: center; margin: 2px 0 8px; } .fw-mascot { width: 210px; max-width: 72%; height: auto; animation: fwBob 3.2s ease-in-out infinite; } .fw-mascot .fw-tear { animation: fwTear 2.6s ease-in-out infinite; transform-origin: 133px 70px; } .fw-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 8px 0 8px; } .fw-msg { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; } @keyframes fwBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @keyframes fwTear { 0%,55% { opacity: .25; transform: translateY(-3px) scaleY(.6); } 80% { opacity: 1; transform: translateY(0) scaleY(1); } 100% { opacity: .25; transform: translateY(6px) scaleY(1); } } .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .brand img { width: 42px; height: 42px; border-radius: 10px; } /* Logo = white crane on a yellow badge (no wordmark). Pops on the white sign-in card and sits on the yellow nav. */ .brand .logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: 10px; } .brand .logo .crane { width: 72%; height: 72%; display: block; } .brand .t { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .brand .s { font-size: 12px; color: var(--muted); font-weight: 600; } .auth-tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 5px; border-radius: 10px; margin-bottom: 20px; } .auth-tabs button { flex: 1; background: transparent; border: none; color: var(--muted); padding: 9px; border-radius: 7px; font-size: 14px; } .auth-tabs button.active { background: var(--accent); color: var(--ink-on-accent); } .err { color: #c81e1e; font-size: 13px; margin: 6px 0 0; min-height: 16px; font-weight: 600; } .invite-banner { background: var(--accent); color: var(--ink-on-accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 13px; font-weight: 600; } .invite-banner b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 2px; } /* ---------- App shell ---------- */ .app-header { position: sticky; top: 0; z-index: 20; flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 18px; padding-top: calc(12px + env(safe-area-inset-top)); background: var(--accent); /* flat yellow nav bar — solid, no blur (blur repaints on iOS) */ border-bottom: 1px solid rgba(0,0,0,.08); color: var(--ink-on-accent); /* dark text on the yellow bar (project title inherits this) */ } .app-header .proj-title { color: var(--ink-on-accent); } .app-header .who { color: #4a3b00; } .app-header .avatar-btn .caret { color: #4a3b00; } .app-header .brand { margin: 0; min-width: 0; } .app-header .brand img { width: 32px; height: 32px; } .app-header .brand .logo { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; } .app-header .brand .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .spacer { flex: 1; } /* The in-project header is GONE. All that stays at the top is a thin status-bar strip: it fills the safe-area inset with brand yellow so the iPhone clock/battery stay legible and the content below can't slide under them. Height collapses to 0 where there's no inset (desktop / older devices with no notch). */ .proj-statusbar { flex: none; height: env(safe-area-inset-top); background: var(--accent); } /* Desktop-only Back + Refresh toolbar for the project view. A MacBook has neither the iOS edge-swipe nor pull-to-refresh (both are touch gestures), so those users get visible controls instead. Hidden by default; revealed only where the PRIMARY pointer is fine (mouse/trackpad) — phones/tablets stay gesture-only. */ .proj-desknav { display: none; } @media (pointer: fine) { .proj-desknav { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .proj-desknav .navback { width: auto; padding: 7px 12px; gap: 6px; font-size: 13px; font-weight: 700; margin: 0; white-space: nowrap; } .proj-desknav .navback svg { flex: none; } .proj-desknav .navback span { display: inline; } .proj-desknav .navrefresh { margin: 0; } .proj-desknav .dn-title { font-size: 15px; color: var(--text); } .proj-desknav .dn-spacer { flex: 1; } } /* More sheet: a divider + the action items (Search / Account / All projects) that used to live in the header. */ .amore-sep { height: 1px; background: var(--line); margin: 8px 14px; } .amore-item svg { width: 22px; height: 22px; flex: none; } .amore-item.amore-back { color: var(--accent-ink); font-weight: 700; } .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.1); display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); font-size: 13px; } .avatar-btn { display: flex; align-items: center; gap: 4px; flex: none; background: transparent; border: 0; padding: 0; cursor: pointer; } .avatar-btn .caret { color: var(--muted); font-size: 11px; line-height: 1; } /* Single combined navigation bar shown inside a project (back · name · role · avatar) */ .app-header.proj-nav { gap: 10px; } .navback { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; background: #fff; border: 1px solid rgba(0,0,0,.1); color: var(--text); border-radius: 9px; cursor: pointer; } .navback:active { transform: scale(.93); } .navback svg { display: block; } .navsearch, .navrefresh { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; margin-right: 6px; background: #fff; border: 1px solid rgba(0,0,0,.1); color: var(--text); border-radius: 9px; cursor: pointer; } .navsearch:active, .navrefresh:active { transform: scale(.93); } .navsearch svg, .navrefresh svg { display: block; width: 18px; height: 18px; } .navrefresh.spin svg { animation: navspin .7s linear infinite; } @keyframes navspin { to { transform: rotate(360deg); } } .navchat { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; margin-right: 6px; background: #fff; border: 1px solid rgba(0,0,0,.1); color: var(--text); border-radius: 9px; cursor: pointer; } .navchat:active { transform: scale(.93); } .navchat svg { display: block; width: 19px; height: 19px; } .navchat .tab-badge { position: absolute; top: -5px; right: -5px; } .navchat.active { background: var(--ink); color: #fff; border-color: var(--ink); } .proj-title { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav-pill { flex: none; } /* Projected completion shown compactly in the nav bar (top-right), dark text on the yellow bar. */ .nav-proj { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.12; text-align: right; flex: none; } .nav-proj:empty { display: none; } .nav-proj .np-date { font-size: 14px; font-weight: 800; color: var(--ink-on-accent); white-space: nowrap; } .nav-proj .np-slip { font-size: 10.5px; font-weight: 700; white-space: nowrap; } .nav-proj .np-slip.ontime { color: #14633a; } .nav-proj .np-slip.late { color: #9a1414; } @media (max-width: 560px) { .nav-proj .np-date { font-size: 12.5px; } .nav-proj .np-slip { font-size: 9.5px; } } /* Dropdown menu (account) */ .menu-bg { position: fixed; inset: 0; z-index: 60; } .menu-pop { position: fixed; z-index: 61; min-width: 184px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(17,24,39,.18); } .menu-item { text-align: left; background: transparent; border: 0; color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .menu-item:hover { background: var(--panel-2); } .menu-item.danger { color: #c81e1e; } /* width:100% keeps the container full-width as a flex child (auto margins alone would shrink it to content). */ /* The container is the scroll area (header stays fixed above it → no rubber-band moving the header). */ .container { max-width: 980px; width: 100%; margin: 0 auto; padding: 22px 18px calc(80px + env(safe-area-inset-bottom)); flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* The project/planner view flex-fills the screen below the sticky header (no pixel math): ONLY the planner iframe scrolls internally, so its top menu stays stuck to the top and the iframe reaches the true screen bottom (the tab bar inside handles the home-indicator safe area). */ .container:has(> .planner-frame) { max-width: none; padding: 12px 16px 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .container:has(> .planner-frame) .page-head { margin-bottom: 0; flex: none; } /* height:100% (not flex-grow, which Safari doesn't apply reliably to iframes) fills the container, whose height is definite via #root:has(.planner-frame){position:fixed;inset:0}. */ .container:has(> .planner-frame) > .planner-frame { height: 100%; min-height: 0; flex: none; } .page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h1 { font-size: 24px; } .page-head .spacer { flex: 1; } .back-link { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 8px 13px; font-size: 13px; line-height: 1; } .back-link svg { display: block; } .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 12px; font-weight: 800; } /* ---------- Cards / project grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); transition: border-color .15s ease, transform .08s ease; } .card.click { cursor: pointer; } .card.click:hover { border-color: var(--accent); transform: translateY(-2px); } .card h3 { font-size: 17px; margin-bottom: 4px; } .card .addr { color: var(--muted); font-size: 13px; font-weight: 600; } .card .meta { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .card.new { display: grid; place-items: center; border-style: dashed; color: var(--accent-ink); min-height: 132px; font-weight: 800; font-size: 15px; } .card { position: relative; } .card.invite { border-color: var(--accent); background: var(--panel); } .invite-actions { display: flex; gap: 10px; margin-top: 16px; } .invite-actions .btn { flex: 1; } .card-leave { position: absolute; top: 12px; right: 12px; } /* Project card with a cover render */ .card.has-cover { padding: 0; overflow: hidden; } .card-cover { position: relative; height: 150px; background-size: cover; background-position: center; background-color: var(--bg-2); } .card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,0) 72%); } .card-cover-co { position: absolute; left: 14px; bottom: 10px; z-index: 1; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .card.has-cover .card-body { padding: 14px 18px 18px; } .card-co { color: var(--accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; } /* New-project cover picker */ .cover-pick { display: block; width: 100%; height: 150px; margin-bottom: 14px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--bg-2); background-size: cover; background-position: center; cursor: pointer; position: relative; overflow: hidden; color: var(--muted); transition: border-color .15s ease; } .cover-pick:hover { border-color: var(--accent); } .cover-pick-inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px; } .cover-pick-icon { font-size: 26px; } .cover-pick-txt { font-weight: 800; font-size: 14px; color: var(--text); } .cover-pick-sub { font-size: 12px; } .cover-pick.has-img { border-style: solid; } .cover-pick.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%); } .cover-pick-change { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-weight: 800; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Go Pro screen */ .pro-card { max-width: 560px; margin: 0 auto; padding: 26px; } .pro-price { text-align: center; margin-bottom: 22px; } .pro-price .amt { font-size: 44px; font-weight: 800; color: var(--text); } .pro-price .per { font-size: 18px; color: var(--muted); font-weight: 700; } .pro-price .alt { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 600; } .pro-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; } .pro-feat { display: flex; gap: 12px; align-items: flex-start; } .pro-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(24,182,99,.18); color: #6ee7a8; display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 1px; } .pro-feat-t { font-weight: 700; font-size: 15px; } .pro-feat-d { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 1px; } .pro-badge { display: inline-block; background: var(--accent); color: var(--ink-on-accent); font-weight: 800; font-size: 13px; letter-spacing: .1em; padding: 5px 12px; border-radius: 999px; width: max-content; } .btn.block { display: block; width: 100%; padding: 13px; font-size: 16px; } /* --- Account screen --- */ .acct-profile { display: flex; align-items: center; gap: 14px; } .acct-avatar { width: 58px; height: 58px; flex: none; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent); display: grid; place-items: center; font-weight: 800; font-size: 22px; } .acct-name { font-size: 18px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-email { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-plan { margin-top: 14px; } .acct-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .acct-plan-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; } .acct-plan-name { font-size: 22px; font-weight: 800; color: var(--text); } .plan-chip { font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 4px 11px; border-radius: 999px; background: var(--bg-2); color: var(--text); } .plan-chip.pro, .plan-chip.max, .plan-chip.business { background: var(--accent); color: var(--ink-on-accent); } .plans-restore { text-align: center; margin-top: 10px; } .linklike { background: none; border: 0; color: var(--accent-ink); font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 6px; } .acct-storage { margin-top: 14px; } .acct-storage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .acct-storage-nums { font-size: 14px; font-weight: 800; color: var(--text); } .storage-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; } .storage-bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; } .storage-bar-fill.ok { background: var(--green); } .storage-bar-fill.warn { background: var(--amber); } .storage-bar-fill.full { background: var(--red); } .acct-storage-sub { margin-top: 9px; font-size: 13px; font-weight: 700; color: var(--muted); } .acct-rows { display: flex; flex-direction: column; gap: 10px; } .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-weight: 700; font-size: 15px; color: var(--text); padding: 15px 16px; } .acct-row .acct-chevron { color: var(--muted); font-size: 22px; line-height: 1; } .acct-row.danger { color: #b91c1c; } .acct-row.danger:hover { border-color: #b91c1c; } /* --- Plans premium entrance + hero --- */ .plans-wash { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: radial-gradient(circle at 50% 38%, #f3c552, var(--accent) 55%, #b5860f); animation: plansWash 1.05s ease forwards; } @keyframes plansWash { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } } .plans-screen.plays { animation: plansRise .6s .42s both cubic-bezier(.2,.7,.3,1); } @keyframes plansRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .plans-head { margin-bottom: 10px; } .plans-hero { text-align: center; margin: 0 -18px 24px; padding: 36px 24px 32px; background: linear-gradient(158deg, #f8d570 0%, var(--accent) 56%, #b9880f 130%); box-shadow: 0 12px 30px rgba(245,197,60,.34); position: relative; overflow: hidden; } .plans-hero::after { content: ""; position: absolute; top: -40%; right: -10%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%); pointer-events: none; } .plans-hero h2 { position: relative; font-size: 28px; font-weight: 800; color: #2a2105; letter-spacing: -0.015em; line-height: 1.12; } .plans-hero p { position: relative; font-size: 14px; color: rgba(42,33,5,.84); font-weight: 600; margin: 10px auto 0; max-width: 440px; } /* --- Plans / paywall tiers --- */ .plan-toggle { display: flex; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; width: max-content; max-width: 100%; margin: 0 auto 18px; } .plan-toggle button { border: none; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; white-space: nowrap; } .plan-toggle button.on { background: var(--accent); color: var(--ink-on-accent); } .tier-grid { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; } @media (min-width: 720px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } } .tier-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .tier-card.feature { border-color: var(--accent); box-shadow: 0 6px 22px rgba(245,197,60,.22); } .tier-card.enterprise { border-color: var(--text); background: #fbfaf7; } .tier-card.current { border-color: var(--accent); } .tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tier-name { font-weight: 800; font-size: 19px; color: var(--text); } .tier-tag { background: var(--accent); color: var(--ink-on-accent); font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; } .tier-blurb { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: -2px; } .tier-price { display: flex; align-items: baseline; gap: 4px; } .tier-price .amt { font-size: 34px; font-weight: 800; color: var(--text); } .tier-price .per { font-size: 15px; color: var(--muted); font-weight: 700; } .tier-caps { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text); font-weight: 600; padding: 10px 0; border-top: 1px solid var(--line); } .tier-caps b { font-weight: 800; } .tier-current { text-align: center; font-weight: 800; color: var(--accent-ink); padding: 11px; border: 1px dashed var(--line); border-radius: 10px; } .tier-trial { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: -2px; } /* Lock badge on Pro-only bottom-bar tabs + More-sheet items */ .atab.locked { color: var(--muted); } .atab .tab-lock { position: absolute; top: 1px; left: 50%; margin-left: 3px; width: 15px; height: 15px; background: var(--accent); color: var(--ink-on-accent); border: 1.5px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .atab .tab-lock svg { width: 9px; height: 9px; } .amore-item.locked { color: var(--muted); } .amore-item .mi-lock { display: inline-flex; align-items: center; margin-left: 6px; color: var(--accent-ink); } .amore-item .mi-lock svg { width: 13px; height: 13px; } .card.new.locked { color: var(--accent-ink); } .card.new .lock-row { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; } .card.new .lock-row svg { width: 17px; height: 17px; } /* ---------- Pills / badges ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } /* Solid pills so they read on BOTH the brown nav bar and the white cards. */ .pill.owner, .pill.admin { background: var(--accent); color: var(--ink-on-accent); border: none; } .pill.editor { background: var(--green); color: #fff; border: none; } .pill.viewer, .pill.manager { background: var(--accent); color: var(--ink-on-accent); border: none; } .pill.sub { background: #475569; color: #fff; border: none; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; background: var(--bg-2); padding: 5px; border-radius: 11px; margin-bottom: 22px; overflow-x: auto; } .tabs button { background: transparent; border: none; color: var(--muted); padding: 10px 16px; border-radius: 8px; font-size: 14px; white-space: nowrap; } .tabs button.active { background: var(--accent); color: var(--ink-on-accent); } /* ---------- Tables / lists ---------- */ .list { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .row .grow { flex: 1; min-width: 0; } .row .name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .sub { font-size: 12px; color: var(--muted); font-weight: 600; } .row .file-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--panel-2); display: grid; place-items: center; flex: none; } /* Admin "All users" rows: keep the name/email/meta block full-width and readable — the action buttons drop to their own line, and long emails wrap at any point instead of never/every char. */ .admin-user-row .admin-actions { flex: 1 1 100%; justify-content: flex-start; } .admin-user-row .admin-email { overflow-wrap: anywhere; word-break: normal; } .empty { text-align: center; color: var(--muted); padding: 40px 20px; font-weight: 600; border: 1px dashed var(--line); border-radius: 12px; } /* ---------- Inline share form ---------- */ .share-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .share-form .field { margin: 0; flex: 1; min-width: 180px; } .share-form select { min-width: 130px; } .role-select { padding: 8px 10px; border-radius: 8px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); font-size: 13px; } .toggle-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); font-weight: 600; cursor: pointer; } .toggle-line input[type=checkbox] { width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: var(--accent); } /* iOS-style toggle switch */ .switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; transition: background .15s ease, border-color .15s ease; } .switch .slider::before { content: ""; position: absolute; height: 22px; width: 22px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s ease; } .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } .switch input:checked + .slider::before { transform: translateX(18px); } /* ---------- Modal ---------- */ .modal-bg { position: fixed; inset: 0; background: rgba(4,8,18,.7); display: grid; place-items: center; z-index: 50; padding: 20px; } .modal { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .modal h2 { font-size: 19px; margin-bottom: 16px; } .modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .linkbtn { background: none; border: none; color: #a86a00; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; padding: 4px; } .linkbtn:hover { text-decoration: underline; } /* ---------- Toast ---------- */ #toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); z-index: 80; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } #toast.err { border-color: var(--red); color: #c81e1e; } /* Loading indicator = the PM+ crane badge that pops in smoothly, then gently bobs. */ .spinner { width: 66px; height: 66px; border: none; border-radius: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h7'/%3E%3Cpath d='M7.5 21V6'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M7.5 6 11 2.9 18 6'/%3E%3Cpath d='M16.5 6v3.1'/%3E%3Cpath d='M15.5 9.1h2l-1 1.7z' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center / 56% no-repeat, var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px rgba(245,197,60,.35); transform-origin: center bottom; animation: cranePop .55s cubic-bezier(.2,.85,.25,1.4) both, craneBob 1.5s ease-in-out .55s infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes cranePop { 0% { opacity: 0; transform: scale(.35) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes craneBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.05); } } .center-load { display: grid; place-items: center; min-height: 50vh; } /* Full-screen loader shown while a project's planner iframe boots. Cream background matches the planner content so it blends seamlessly into the iframe's own boot screen (one continuous loader). */ .proj-loading { position: fixed; inset: 0; z-index: 1000; background: #ffffff; display: grid; place-items: center; } .proj-loading.hide { opacity: 0; pointer-events: none; transition: opacity .35s ease; } /* Yellow crane loader (reload-style hoist), no badge / no pop. Shared look with the in-iframe boot loader. */ .crane-loader { width: 64px; height: 64px; } .crane-loader svg { width: 100%; height: 100%; overflow: visible; } .crane-loader .rl-cube { transform-box: fill-box; transform-origin: center; animation: craneLoad 1.15s ease-in-out infinite; } @keyframes craneLoad { 0%, 100% { transform: translateY(2.5px); } 50% { transform: translateY(-3px); } } /* ---------- Project bottom tab bar — REBUILT (attempt 20): pinned to the viewport bottom ---------- position:fixed;bottom:0 anchors the bar to the visual bottom of the screen INDEPENDENT of any #root/flex height calculation, rotation, or keyboard state — the thing that broke every prior flex-based attempt. The bar lives in the TOP-LEVEL document (env(safe-area-inset-bottom) is only reliable here, not inside the iframe). Its background fills down to the true bottom edge while the icons are lifted above the home indicator by the bottom padding. The iframe behind it reserves this bar's height via --barh (posted as __pmbarh) so no content hides underneath. */ /* The bar is the LAST flex child of #root (NOT position:fixed — fixed pins to iOS's short 844 viewport and can't reach the true screen bottom). With #root sized to the full screen (100vh in standalone), this flex child lands at the real bottom; padding-bottom lifts the icons above the home indicator. */ .app-tabbar { flex: none; z-index: 50; display: flex; background: #fff; border-top: 1px solid #e6e6e9; box-shadow: 0 -4px 18px rgba(0,0,0,.06); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .app-tabbar.kb-hidden { display: none; } .atab { position: relative; flex: 1; min-width: 0; background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: #6b7280; font-size: 10.5px; font-weight: 700; border-radius: 10px; cursor: pointer; } .tab-badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--accent); color: var(--text); border: 2px solid #fff; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; } .atab svg { width: 23px; height: 23px; } .atab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .atab.active { color: var(--accent-ink); } .atab.active svg { stroke: var(--accent-ink); } /* Landscape on phones: vertical space is scarce, so slim the top bar + tab bar so the content isn't crushed. */ @media (orientation: landscape) and (max-height: 500px) { .app-header { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; } .app-tabbar { padding: 2px 4px calc(2px + env(safe-area-inset-bottom)); } .atab { padding: 4px 2px; gap: 1px; font-size: 9.5px; } .atab svg { width: 19px; height: 19px; } .container { padding-top: 12px; padding-bottom: calc(58px + env(safe-area-inset-bottom)); } } .notif-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent); color: var(--text); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(245,197,60,.28); } .notif-banner .nb-text { flex: 1; min-width: 160px; } .notif-banner strong { font-size: 15px; font-weight: 800; } .notif-banner .nb-sub { font-size: 12.5px; font-weight: 600; opacity: .82; margin-top: 2px; } .notif-banner .nb-actions { display: flex; gap: 8px; flex: 0 0 auto; } .notif-banner .btn { background: var(--text); color: #fff; } .notif-banner .btn:hover { background: #000; } .notif-banner .btn.ghost { background: rgba(28,26,18,.1); color: var(--text); } .amore-sheet { position: fixed; inset: 0; z-index: 60; } .amore-sheet[hidden] { display: none; } .amore-bg { position: absolute; inset: 0; background: rgba(0,0,0,.35); } .amore-panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: sheetUp .2s cubic-bezier(.2,.8,.2,1); } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .amore-grip { width: 40px; height: 4px; border-radius: 99px; background: #cdcdd2; margin: 6px auto 12px; } .amore-item { width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; } .amore-item svg { width: 22px; height: 22px; color: var(--muted); } .amore-item.active { background: var(--bg-2); color: var(--accent-ink); } .amore-item.active svg { color: var(--accent-ink); } /* App-open loading overlay (yellow crane) shown while the app boots. */ .app-loading { position: fixed; inset: 0; z-index: 2000; background: #fff; display: grid; place-items: center; } .app-loading.hide { opacity: 0; pointer-events: none; transition: opacity .3s ease; } /* Reload indicator: a WHITE crane centered in the top brown nav bar; its cube hoists up/down. */ .navcrane { position: fixed; top: env(safe-area-inset-top); left: 50%; z-index: 30; height: 54px; width: 42px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(-50%) scale(.55); pointer-events: none; } .navcrane svg { width: 34px; height: 34px; display: block; overflow: visible; } /* While the reload crane is showing, fade the title/brand so the crane never overlaps it. */ body.crane-on .proj-title, body.crane-on .brand .t { opacity: 0; transition: opacity .15s ease; } /* During the pull the box position is set inline (lowers); only while loading does it sling. */ .navcrane.loading .rl-cube { animation: rlSling .85s ease-in-out infinite; } @keyframes rlSling { 0%, 100% { transform: translateY(-1.6px); } 50% { transform: translateY(-3.4px); } } /* (legacy pull-to-refresh badge styles, no longer used — kept harmless) */ .ptr-ind { position: fixed; top: 0; left: 50%; z-index: 70; opacity: 0; transform: translateX(-50%) translateY(-60px); pointer-events: none; } .ptr-crane { width: 44px; height: 44px; border-radius: 13px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(245,197,60,.45), inset 0 1px 0 rgba(255,255,255,.18); } .ptr-crane svg { width: 62%; height: 62%; } .ptr-crane.pop { animation: ptrPop .4s cubic-bezier(.2,.85,.25,1.4); } /* The crane's hook/load winches up and down (the cable reels in). */ .ptr-crane .cr-hook { transform-box: fill-box; transform-origin: 50% 0; animation: craneHoist 1.15s ease-in-out infinite; } .ptr-ind.ready .ptr-crane { box-shadow: 0 10px 28px rgba(245,197,60,.7), inset 0 1px 0 rgba(255,255,255,.22); } @keyframes ptrPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } } @keyframes craneHoist { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.32); } } /* The project planner iframe — fills the viewport below the header. */ .planner-frame { display: block; width: 100%; height: calc(100dvh - 132px); min-height: 560px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } @media (max-width: 560px) { /* iOS zooms when focusing an input under 16px — force ≥16px past class rules. */ input, textarea, select { font-size: 16px !important; } /* Keep the safe-area top offset (the shorthand above would otherwise reset it → nav under the notch). */ .app-header { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); gap: 8px; } .app-header .brand .t { font-size: 18px; } /* show the short "Cm+" wordmark next to the crane */ .who { gap: 7px; } .who > span { display: none; } /* hide the name; avatar stays */ .back-link { padding: 7px 9px; font-size: 12px; } /* One tight row: ‹ Projects · name (truncates) · ↓ Backup. Role pill is redundant here. */ .page-head { gap: 8px; flex-wrap: nowrap; margin-bottom: 16px; } .page-head h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .page-head .pill { display: none; } .nav-pill { display: none; } /* role is redundant in the project nav bar */ .container { padding: 16px 12px calc(70px + env(safe-area-inset-bottom)); } /* Full-bleed: iframe butts directly against the nav bar (no dark gap strip), runs edge-to-edge. The bottom home-indicator safe area is reserved HERE in the top-level doc (env() is reliable here, but unreliable inside the iframe on iOS) so the iframe ends just above the home indicator. */ /* Iframe fills to the true screen bottom; the tab bar pads itself by the safe area (passed in via __pmsafe). */ .container:has(> .planner-frame) { padding: 0; gap: 0; } .container:has(> .planner-frame) .page-head { padding: 0 12px; margin-bottom: 0; } .grid { grid-template-columns: 1fr; } .planner-frame { min-height: 0; border: none; border-radius: 0; } .modal { padding: 20px; } } /* ---------------- guided tour ("show me around") ---------------- */ .tour-ov { position: fixed; inset: 0; z-index: 5000; pointer-events: none; } .tour-ov .tour-block { position: fixed; inset: 0; pointer-events: auto; background: transparent; } .tour-ov .tour-block.dim { background: rgba(2, 6, 23, .62); } .tour-ring { position: fixed; border-radius: 14px; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(2, 6, 23, .62), 0 0 0 4px rgba(245, 197, 60, .35); pointer-events: none; transition: left .28s, top .28s, width .28s, height .28s; } .tour-pop { position: fixed; width: min(300px, calc(100vw - 24px)); background: #fff; color: var(--text); border-radius: 20px; padding: 15px 16px 12px; box-shadow: 0 20px 55px rgba(0, 0, 0, .45); pointer-events: auto; z-index: 5002; overflow: visible; animation: tourpop .24s ease; } @keyframes tourpop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } .tour-pop .tour-head { display: flex; align-items: center; margin-bottom: 7px; } .tour-pop .tour-head strong { font-size: 16px; line-height: 1.25; } .tour-pop p { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0 0 13px; } /* Speech-bubble tail — a white triangle on the edge nearest the mascot. */ .tour-pop-tail { position: absolute; width: 26px; height: 15px; background: #fff; margin-left: -13px; z-index: 5003; } .tour-pop-tail.up { top: -13px; clip-path: polygon(50% 0, 0 100%, 100% 100%); } .tour-pop-tail.down { bottom: -13px; clip-path: polygon(50% 100%, 0 0, 100% 0); } /* "Hoss" — a tower-crane mascot; bobs, blinks, swings his hook, and pops in from the top each step. */ .tour-mascot { position: fixed; width: 196px; height: auto; z-index: 5004; pointer-events: none; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); animation: m-enter .55s cubic-bezier(.34,1.56,.64,1) both; } .tour-mascot .m-body { transform-box: view-box; transform-origin: 150px 120px; animation: m-bob 3.2s ease-in-out infinite; } .tour-mascot .m-eyes { transform-box: view-box; transform-origin: 148px 61px; animation: m-blink 4.6s infinite; } .tour-mascot .m-hook { transform-box: view-box; transform-origin: 60px 62px; animation: m-swing 3.4s ease-in-out infinite; } @keyframes m-enter { 0% { transform: translateY(-150px) scale(.85); opacity: 0; } 65% { opacity: 1; } 100% { transform: translateY(0) scale(1); } } @keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes m-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } } @keyframes m-swing { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { .tour-mascot, .tour-mascot * { animation: none !important; } } .tour-pop b { color: var(--text); } .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tour-actions .tour-skip { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; min-width: 40px; text-align: left; } .tour-actions .tour-next { background: var(--accent); color: #3a2c06; border: none; border-radius: 999px; padding: 9px 20px; font-weight: 800; font-size: 14px; cursor: pointer; } .tour-actions .tour-next:hover { background: var(--accent-2); } .tour-dots { display: flex; gap: 5px; } .tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; } .tour-dots i.on { background: var(--accent); } /* ===================== Rusty + schedule generator ===================== */ /* reuse the tour mascot, but sized/positioned inline (override the tour's fixed positioning) */ .rusty-mascot { position: static !important; width: 96px !important; height: auto !important; z-index: auto !important; flex: 0 0 auto; } .rusty-mascot.rusty-hop { animation: rusty-hop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes rusty-hop { 0%{transform:translateY(0)} 35%{transform:translateY(-9px)} 100%{transform:translateY(0)} } .rusty-bubble { background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 15px; font-size: 14px; line-height: 1.5; color: var(--text); box-shadow: var(--shadow); position: relative; } .rusty-bubble b { color: var(--accent-ink); } /* empty-schedule welcome */ .sched-empty { max-width: 500px; margin: 8px auto; padding: 26px 20px 40px; text-align: center; } .sched-empty-rusty { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 22px; } .sched-empty-rusty .rusty-mascot { width: 96px !important; } .sched-bubble::before { content:""; position:absolute; left:-8px; top:28px; width:14px; height:14px; background:var(--panel); border-left:1.5px solid var(--line); border-bottom:1.5px solid var(--line); transform: rotate(45deg); } .sched-empty-cta { display: flex; flex-direction: column; gap: 10px; align-items: center; } .sched-empty-cta .btn { width: 100%; max-width: 340px; } /* wizard overlay */ .wizov { position: fixed; inset: 0; z-index: 4000; background: rgba(28,26,18,.42); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: wiz-fade .18s ease; } @keyframes wiz-fade { from{opacity:0} to{opacity:1} } .wizbox { background: var(--bg); width: 100%; max-width: 460px; border-radius: 22px 22px 0 0; padding: 14px 20px 26px; box-shadow: 0 -8px 40px rgba(28,26,18,.22); position: relative; animation: wiz-up .26s cubic-bezier(.34,1.4,.5,1); max-height: 92vh; overflow-y: auto; } @keyframes wiz-up { from{transform:translateY(30px)} to{transform:translateY(0)} } @media (min-width:560px){ .wizov{align-items:center;padding:20px} .wizbox{border-radius:22px} } .wiz-x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: none; background: var(--panel-2); border-radius: 50%; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; } .wiz-rusty { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; } .wiz-rusty .rusty-mascot { width: 86px !important; } .wiz-rusty .rusty-bubble { flex: 1; } .wiz-body { display: flex; flex-direction: column; gap: 12px; } .wiz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .wiz-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 10px; background: var(--panel); border: 1.6px solid var(--line); border-radius: 15px; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; transition: border-color .12s, transform .08s; } .wiz-opt:hover { border-color: var(--accent-2); } .wiz-opt:active { transform: scale(.97); } .wiz-opt.sel { border-color: var(--accent); background: #fdf6df; } .wiz-ico { font-size: 26px; line-height: 1; } .wiz-floors .wiz-opt { padding: 16px 10px; font-size: 18px; } .wiz-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wiz-chip { padding: 13px 10px; background: var(--panel); border: 1.6px solid var(--line); border-radius: 13px; font-weight: 700; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .wiz-chip em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); } .wiz-chip.sel { border-color: var(--accent); background: #fdf6df; } .wiz-field { display: flex; flex-direction: column; gap: 6px; } .wiz-field > label { font-size: 13px; font-weight: 700; color: var(--muted); } .wiz-opt-lbl { font-weight: 500; color: var(--muted); } .wiz-field input[type=date], .wiz-field input[type=number], .wiz-inrow input { padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; background: var(--panel); color: var(--text); width: 100%; } .wiz-inrow { display: flex; align-items: center; gap: 8px; } .wiz-inrow span { color: var(--muted); font-weight: 700; } .wiz-seg { display: flex; background: var(--bg-2); border-radius: 12px; padding: 3px; gap: 3px; } .wiz-seg button { flex: 1; padding: 10px 6px; border: none; background: transparent; border-radius: 9px; font-weight: 700; color: var(--muted); cursor: pointer; font-size: 13px; } .wiz-seg button.on { background: var(--accent); color: var(--ink-on-accent); } .wiz-checks { display: flex; flex-direction: column; gap: 7px; } .wiz-check { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; } .wiz-check input { width: 19px; height: 19px; accent-color: var(--accent-2); } .wiz-check span { flex: 1; } .wiz-check em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); } .wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; } .wiz-back { background: none; border: none; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 4px; } .wiz-next, .wiz-commit { flex: 1; padding: 13px; border: none; border-radius: 13px; background: var(--accent); color: var(--ink-on-accent); font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 2px 0 var(--accent-2); } .wiz-commit { border: 2px solid var(--text); } .wiz-next:active, .wiz-commit:active { transform: translateY(1px); box-shadow: none; } .wiz-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 2px 0; } .wiz-stat { background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 8px; text-align: center; } .wiz-stat b { display: block; font-size: 19px; color: var(--text); line-height: 1.1; } .wiz-stat span { font-size: 11px; color: var(--muted); font-weight: 600; } .wiz-sub { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; } .wiz-verdict { border-radius: 12px; padding: 11px 13px; font-size: 13px; font-weight: 600; line-height: 1.45; } .wiz-verdict.good { background: #e8f2e6; color: var(--green-d); } .wiz-verdict.tight { background: #fbe9d6; color: #b5701c; } .wiz-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; } .wiz-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; } .wiz-dots span.done { background: var(--accent-2); } .wiz-dots span.on { background: var(--accent); width: 18px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .rusty-svg, .rusty-arm, .sched-empty-rusty .rusty-svg, .wiz-rusty, .rusty-svg.rusty-pop { animation: none !important; } }