/* =========================================================================== THE PHONE — designed, not squeezed. 5 Oct 2026. Loads last. Everything in the first block is for a phone (under 760px); the second is for any touch screen and only removes blur. Not one rule here touches the wide layout. app.css is her design and is not changed; this file uses her tokens, her classes and her materials, and lays them out the way a phone is actually used: standing up, one hand, thumb at the bottom. WHAT THE RESEARCH SAID, AND WHAT THIS TAKES FROM IT · A day's appointments on a phone are one row of days to flick through and ONE day's list underneath — time on the left, one row per appointment, one tap each. Never several days side by side. (Apple and Google calendars, Square's day view, SAP's planning calendar all do exactly this.) · A number on a phone is a compact tile: the number, its name, one line of context. Five to nine of them, the one that matters most on top, bigger. · Secondary controls fold into a bottom sheet behind a scrim rather than sharing the bar (Apple's sheets, Material's modal bottom sheet). · The primary action and the main navigation sit where the thumb rests: the bottom. Destructive or rare things sit further up. · Every tap target is at least 44px. No text is under 12px. · A text thread is bubbles: theirs on the left, ours on the right, one name per run of messages, one time per run, the latest at the bottom. HOW EACH SCREEN IS LAID OUT Home / Today the one that needs a person is a full card at the top; the counts are a two-across grid; anything with a preview (the plan, bookings, the number) is a full-width row. Ready for you the video sized to leave the words and the decision on the same screen; the four settings are a strip; Yes / Not this one stick to the bottom, above the tabs. Add footage the drop zone, the library in one line, the five steps as rows. Pick the bits one moment per row, the tick top-right, the decision stuck to the bottom. The plan a strip of days, one day's posts beneath as rows (js/mobile.js builds the strip and shows one day; with no script the days simply stack as an agenda). Funnels / Chats a list of rows; open one and it takes the screen, with its own back pill; the list keeps its scroll position. Inbox the channels as a strip, each message a card with its action buttons full width. Your brand / What it knows / The number settings rows with a chevron, in the order they are asked about; each opens its sheet. Bookings the same strip-and-day as the plan; the booking systems as a strip above it. ======================================================================== */ /* ======================================================= THE PHONE ====== */ @media (max-width:759px){ html{ /* a brand writes its own wide gutter (48–72px) inline on ; on a phone that is a third of the screen */ --gutter:16px !important; /* the bar is sticky and content scrolls under it, so it is painted in the world's own colour, solid. A brand whose designer left the bar transparent takes this too (themes.css asks for --bar-wash). Solid, not a mix: what sits behind the bar's words must be a colour that can be read back and checked, and a sticky bar has nothing to show through. */ --bar-wash:var(--deep); /* the bottom tab bar's reach from the bottom of the screen: 50px tall, 5px padding each side, 10px off the bottom */ --tabs-h:70px; } /* ---- nothing under 12px, anywhere ---------------------------------- */ .th[data-d]::after{font-size:12px;line-height:1.3;padding:1px 4px} .m .by,.runs .rs,.aic .free,.tile .week b,.tabs a .n,.mark,.n{font-size:.76rem} .label,.ans>.label,.ib .by,.kind,.cv .kind,.ib .draft .label{font-size:.76rem} /* ---- the bar: one row, sticky, out of the way ------------------------ Logo · Social/Assistant · one round button. The account, who is looking, text size and day/night fold behind that button (js/mobile.js moves the app's own controls into the sheet and back). */ .bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:nowrap;align-items:center;gap:8px; padding:8px var(--gutter);min-height:60px;border-bottom:1px solid var(--on-world-line)} html[lang] .bar{background:var(--bar-wash)} .bar .wm{font-size:.95rem;letter-spacing:.22em;padding:0} .bar .whose{gap:0;min-height:44px;display:flex;align-items:center;flex:0 0 auto} .bar .whose img,.bar .whose .own-mark{height:40px;padding:5px 7px;border-radius:10px} .bar .whose .who-t{display:none} .bar .whose .mk{width:32px;height:32px;flex:0 0 auto;display:block} .bar .whose .wmk b{font-size:.84rem} .bar .whose .wmk span{display:none} .bar .seg{display:none} .bar .prod{margin:0 auto;padding:2px;flex:0 1 auto;min-width:0} .bar .prod button{height:44px;padding:0 14px;font-size:.92rem;white-space:nowrap} .mb-more{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--on-world);border:1px solid var(--on-world-line);color:inherit;cursor:pointer;padding:0} .mb-more[hidden]{display:none} .mb-more svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .mb-more svg circle{fill:var(--glass);stroke:currentColor} .mb-more:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* if the script never ran, the controls are still in the bar: let them wrap rather than vanish */ .bar .mode,.bar .client,.bar .chrome{flex:0 0 auto} .bar:has(> .mode, > .client, > .chrome){flex-wrap:wrap} /* ---- the folded controls: a bottom sheet in the app's own sheet shape -- */ .mb-menu{position:fixed;inset:0;z-index:310} .mb-menu[hidden]{display:none} .mb-menu .veil{position:absolute;inset:0;background:rgba(2,10,14,.55)} .mb-menu .pan{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow:auto;color:var(--ink); background:var(--glass);border-radius:var(--r2) var(--r2) 0 0;box-shadow:0 -20px 80px rgba(0,0,0,.4); padding:0 0 calc(14px + env(safe-area-inset-bottom))} .mb-menu .grab{width:44px;height:5px;border-radius:999px;margin:10px auto 0;background:color-mix(in srgb,var(--ink) 18%,transparent)} .mb-menu .hd{display:flex;align-items:center;gap:12px;padding:10px 16px 6px} .mb-menu .hd h2{flex:1;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.05} .mb-menu .x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)} .mb-menu .x svg{width:20px;height:20px} .mb-menu .mrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;min-height:64px;padding:12px 16px;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)} .mb-menu .mrow:not(:has(.mode,.client,.chrome)),.mb-menu .mrow:has(> [hidden]:only-child){display:none} .mb-menu .mrow .t{flex:1 1 140px;min-width:0} .mb-menu .mrow .t b{display:block;font-weight:600;font-size:1rem;line-height:1.25} .mb-menu .mrow .t span{display:block;color:var(--ink-2);font-size:.88rem} .mb-menu .mode,.mb-menu .client,.mb-menu .chrome .grp{ background:color-mix(in srgb,var(--ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;margin:0} .mb-menu .mode button,.mb-menu .chrome button{color:var(--ink);height:44px;min-width:44px} .mb-menu .mode button:hover,.mb-menu .chrome button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} .mb-menu .mode button.on{background:var(--ink);color:var(--glass)} .mb-menu .client{height:48px;padding:0 16px 0 10px;font-size:.98rem;max-width:100%} .mb-menu .client .name{display:inline;overflow:hidden;text-overflow:ellipsis} .mb-menu .client .name-s{display:none} .mb-menu .client.locked{opacity:.78} /* with the agency row hidden, the business name must not sit on its own subtitle */ html[data-demo] .mb-menu [data-mb-slot=".client"], html[data-preview] .mb-menu [data-mb-slot=".client"]{flex-direction:column;align-items:flex-start} html[data-demo] .mb-menu [data-mb-slot=".client"] .client, html[data-preview] .mb-menu [data-mb-slot=".client"] .client{max-width:100%} .mb-menu .chrome{margin:0;gap:8px;flex-wrap:wrap} /* ---- screens: one column, a compact heading, room for the tab bar ----- */ .screen{padding:8px var(--gutter) calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom));max-width:none} .screen>header{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 16px} .screen>header h1{flex:1 1 auto;min-width:0;font-size:1.85rem;line-height:1.05;letter-spacing:-.02em} .screen>header p{flex:1 1 100%;order:9;font-size:.95rem;padding:0;opacity:.84;line-height:1.35} .screen>header .info,.screen>header .back{flex:0 0 auto;align-self:center;margin:0} .screen>header .back{height:44px;min-width:44px;padding:0 14px 0 10px;font-size:.88rem} .back{min-width:44px} .screen>header .info{width:44px;height:44px} /* ---- buttons and the one text field --------------------------------- */ .go,.no{height:auto;min-height:48px;padding:10px 18px;font-size:1rem;white-space:normal;text-align:center;line-height:1.2;max-width:100%} .go svg{width:20px;height:20px} .ask{margin:0 0 16px;gap:6px;grid-template-columns:minmax(0,1fr)} .ask>.label{font-size:.78rem} .askrow{padding:10px 12px;gap:8px;flex-wrap:wrap} .screen .askin{flex:1 1 100%;min-width:0;width:auto;height:44px;font-size:1rem} .screen .askrow .go{height:44px;min-height:44px;padding:0 16px;font-size:.92rem;flex:1 1 100%;white-space:nowrap} .screen .ask.compact{margin-bottom:12px} .screen .ask.compact .askin{height:44px;font-size:1rem} .screen .ask.compact .askrow .go{height:44px;padding:0 14px} /* ---- the dashboard: Home and Today ------------------------------------ Two across. The one that needs a person, and anything that carries a preview, takes the full width. Every tile is a small grid: number | art (art: the fan of clips, to the right) words | art more · more (a strip, chips, a mini-week, the bubbles) */ .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"big art" "words art" "more more"; column-gap:0;row-gap:4px;align-content:start;align-items:start;min-height:0;width:auto;overflow:visible; padding:14px 14px 12px;border-radius:var(--r2)} .tile:hover{transform:none} .tile>.big,.tile>.num{grid-area:big} .tile>.big{font-size:2.3rem;line-height:.95;letter-spacing:-.04em} .tile>.num{font-size:1.25rem;line-height:1.1;letter-spacing:.01em;overflow-wrap:anywhere} .tile>span:last-child{grid-area:words;min-width:0} .tile h2{font-size:1rem;line-height:1.2;letter-spacing:-.01em} .tile p{font-size:.8rem;line-height:1.35;margin-top:3px;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .screen .tiles .tile>.art{grid-area:art;position:static;inset:auto;max-width:none;width:auto;margin:0 0 0 12px;align-self:center;justify-self:end;display:flex} .tile>.week,.tile>.rulechips,.tile>.sts,.tile>.swatch,.tile>.strip, .tile>span:first-child:not(.big):not(.num):not(.art):not(.week):not(.rulechips):not(.sts):not(.swatch):not(.strip){grid-area:more;min-width:0;max-width:100%;margin-top:6px} .tile.hero,.tile.wide,.tile:has(> .week),.tile:has(> .rulechips),.tile:has(> .sts),.tile:has(.accts), .tile:has(> .art > .fan),.tile:has(> .strip),.tile:has(> .swatch){grid-column:1/-1} /* the one that needs a person: full card, its colour, what they asked underneath */ .tile.hero{padding:18px 16px 16px;border-radius:var(--r);row-gap:6px} .tile.hero>.big{font-size:3.2rem} .tile.hero h2{font-size:1.3rem} .tile.hero p{font-size:.92rem;-webkit-line-clamp:3} .screen .tiles .tile.hero>.art{grid-area:more;justify-self:stretch;align-self:start;width:100%;max-width:none;margin:8px 0 0;display:block} .screen .tiles .tile .stack{display:grid;gap:6px;justify-items:start;width:100%} .screen .tiles .tile .stack i{max-width:94%;margin:0;white-space:normal;text-overflow:clip;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; padding:8px 12px;border-radius:16px 16px 16px 4px;font-size:.86rem;line-height:1.3} /* the clips waiting for a yes: three small frames to the right, each with its length */ .tile .fan{gap:8px;padding-bottom:8px} .tile .fan .frame{width:48px;height:82px;border-radius:9px;box-shadow:0 6px 14px rgba(0,0,0,.24)} .tile .fan .frame:nth-child(2){transform:translateY(4px)} .tile .fan .frame:nth-child(3){transform:translateY(8px)} .tile .fan .th::before{min-width:12px} .tile .fan .th[data-d]::after{right:2px;bottom:2px} .tile .strip{gap:6px;flex-wrap:wrap} .tile .strip .frame{width:64px;height:42px;border-radius:8px} .tile .plus{width:52px;height:52px;font-size:1.8rem;border-width:2px} /* the plan's mini-week: a strip that scrolls inside the tile, never the page */ .tile>.week{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;flex-wrap:nowrap} .tile>.week::-webkit-scrollbar{display:none} .tile .week b{flex:0 0 auto;gap:4px} .tile .week .frame{width:22px;height:38px;border-radius:5px} .tile .week .th::before{min-width:10px} .tile .week .th.ph,.tile .week .th.ml{width:30px;height:30px;border-width:2px} .screen .asst .tile>.week{flex-wrap:wrap;overflow:visible;gap:8px} .tile .week .tt i{font-size:.8rem;padding:4px 9px 4px 8px} .tile .week .tt i::before{width:8px;height:8px} .tile .sts{display:flex;flex-wrap:wrap;gap:6px 14px} .tile .sts .st{font-size:.86rem} .rulechips{gap:6px} .rulechips i{font-size:.8rem;padding:5px 10px} .tile .swatch i{width:28px;height:28px;margin-left:-8px} .tile .accts i{font-size:.78rem;padding:4px 9px} /* the wide one: number beside the words */ .tile.wide{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"big words";align-items:center;column-gap:14px;min-height:0;padding:14px 16px} .tile.wide>.big{font-size:2.3rem} .tile.wide p{max-width:none} /* ---- ready for you: the video, the words, the decision, on one screen -- */ .cuts{gap:24px} .cut{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start} /* the words become items of the cut itself, so the decision can stick to the bottom from the first paint rather than from wherever the words start */ .screen .cut .say{display:contents} .screen .stage .frame{width:min(100%,calc(52dvh * .5625));height:auto;max-height:none;aspect-ratio:9/16;border-radius:var(--r2);box-shadow:0 24px 60px rgba(0,0,0,.4)} .stage .glow{inset:10% -4% 0} .stage .prog{left:10px;right:10px;top:10px} .stage .len,.stage .plat{top:22px;padding:4px 10px;font-size:.78rem} .stage .len{right:10px} .stage .plat{left:10px} .stage .play{width:60px;height:60px} .stage .play svg{width:24px;height:24px;margin-left:4px} .stage .cap{bottom:9%;padding:0 14px;gap:2px 7px} .stage .cap i{font-size:1.12rem} .say .made{font-size:.9rem} .say h2{font-size:1.4rem} .say blockquote{font-size:1.02rem;max-width:none;line-height:1.35} .from{font-size:.88rem;gap:6px 8px} .from small,.to small{font-size:.76rem} .screen .from .src{height:40px;font-size:.86rem;padding:0 12px 0 4px;gap:8px} .screen .from .src .frame{width:44px;height:28px;border-radius:6px} .to span{height:36px;padding:0 12px;font-size:.86rem} /* the four settings: a strip of cards, the third one peeking so the strip reads as a strip */ .picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;margin:0;padding:0} .pick{min-width:0;min-height:84px;padding:12px 14px 10px;border-radius:var(--r3);gap:8px} .pick:hover{transform:none} .pick b{font-size:1.02rem} .pick .st{font-size:.8rem} /* the decision sits where the thumb is: stuck to the bottom, above the tabs */ .decide{position:sticky;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom));z-index:5; margin:10px calc(-1 * var(--gutter)) 0;padding:14px var(--gutter) 10px;gap:8px;flex-wrap:nowrap; background:linear-gradient(to top,var(--deep) 68%,transparent)} .decide .go{flex:1 1 auto;min-width:0;height:54px;min-height:54px;padding:0 18px} .decide .no{flex:0 0 auto;min-width:0;height:54px;min-height:54px;padding:0 18px} .held{margin-top:12px;min-height:48px;padding:8px 14px;gap:6px 10px;border-radius:var(--r3)} .held .st{font-size:.95rem} .held .note{margin-left:0;flex:1 1 100%;font-size:.84rem} /* ---- add footage ------------------------------------------------------ */ .drop{padding:24px 18px 20px;gap:8px;border-radius:var(--r2)} .drop:hover{transform:none} .drop .plus{width:64px;height:64px;font-size:2.2rem;margin-bottom:2px} .drop b{font-size:1.35rem} .drop p{font-size:.92rem;max-width:none} .drop .go{min-width:0;width:100%;margin-top:6px;height:52px;min-height:52px} .lib{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:3px;margin:12px 0 0;padding:10px 14px;border-radius:var(--r3);font-size:.9rem;max-width:none} .lib .frames{grid-row:1/4;margin:0} .lib .frames .frame{width:28px;height:48px;border-radius:7px;margin-left:-10px} .lib b{font-size:.98rem} .steps{gap:8px;margin-top:14px;grid-template-columns:1fr} .step,.step.yours{grid-column:auto;padding:12px 14px;min-height:0;column-gap:12px;border-radius:var(--r3)} .step b{font-size:1.7rem;min-width:1.2em} .step h3{font-size:.98rem} .step p{font-size:.86rem} .step.yours h3::after{font-size:.76rem;margin-left:8px} /* ---- pick the bits: one moment per row ------------------------------- */ .moments{gap:10px;grid-template-columns:1fr} .mo{padding:6px;border-radius:var(--r2)} .mo:hover{transform:none} .mo .frame{aspect-ratio:16/9;border-radius:calc(var(--r2) - 6px);padding:12px} .mo .frame .t{font-size:1rem;padding-right:52px} .mo .frame .pl{width:48px;height:48px;margin:-24px 0 0 -24px} .mo .frame .pl svg{width:22px;height:22px} .mo .tick{width:44px;height:44px;right:10px;top:10px} .mo .tc{left:10px;top:10px;padding:5px 10px;font-size:.78rem} .mo .frame .dur{right:12px;bottom:12px;font-size:.8rem} .mo .left{right:10px;top:10px;font-size:.78rem;padding:5px 10px} .mo .bd{padding:10px 8px 6px;gap:8px} .mo .bd p{font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mo .tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .mo .tags::-webkit-scrollbar{display:none} .mo .tags i{flex:0 0 auto;font-size:.78rem;padding:5px 10px} /* ---- strips and segmented controls ------------------------------------ Two shapes, both real controls. A STRIP is a row of chips that scrolls sideways with momentum and snap, never wraps, never shows a scrollbar: the plan's days, the inbox's channels. A segmented control (.filt) is two or three equal cells in one pill: what to show. Both are the app's own .seg, which app.css hides under 760px because the bar's nav folds into the tab bar; in a screen it is shown. The selected cell takes the button colour, the same as every other primary thing on the screen. */ .screen .seg{display:flex} .screen .seg.strip{flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;order:0;width:auto; margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scroll-snap-type:x proximity; background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none} .screen .seg.strip::-webkit-scrollbar{display:none} .screen .seg.strip>a,.screen .seg.strip>button{flex:0 0 auto;height:46px;padding:0 16px;border-radius:var(--rp,999px);display:inline-flex;align-items:center;gap:8px; scroll-snap-align:start;background:var(--on-world);border:1px solid var(--on-world-line);color:inherit; font-weight:600;font-size:.95rem;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s} .filtwrap{position:sticky;top:var(--bar-h,60px);z-index:6;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 8px;background:var(--bar-wash)} .screen .seg.filt{width:auto;order:0;margin:0;padding:3px;gap:3px;overflow:hidden} /* each cell takes what its words need and the rest is shared: "Needs you" is short, "Needs Oleander" (an agency looking at a client) is not, and an equal third clipped the long one at its left edge */ .screen .seg.filt>a{flex:1 1 auto;min-width:0;height:44px;padding:0 10px;justify-content:center;gap:6px;font-size:.9rem;font-weight:600} html[lang] .screen .seg a.on,html[lang] .screen .seg button.on{background:var(--go-bg);color:var(--go-ink);border-color:transparent;font-weight:700} .screen .seg a .n,.screen .seg button .n{min-width:22px;height:22px;padding:0 6px;font-size:.76rem} .screen .seg a .ct{opacity:.72;font-weight:600;font-size:.84rem} /* ---- the plan, and bookings: a strip of days, one day's rows ---------- js/mobile.js builds