/* ============================================================ The portal's stylesheet (the "Magleby Console" canvas, verbatim) ============================================================ THIS IS THE BOARDS' CSS. Every token, component and measurement below is lifted from the canvas's own stylesheet (Main.dc.html and its siblings share one), so a page built from these classes looks like its board. The additions are at the end and are only what a static board does not need: the 1600 x 900 frame scaled to the window, the one scrolling feed, real form controls, popups, and the sign-in box. Nothing here restyles a board class. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap'); :root{ --ground:#08090C; --panel:#0E1116; --raise:#141922; --raise2:#1A2029; --line:#1F2630; --line-soft:#171C25; --text:#EEF0F3; --muted:#98A0AB; /* --dim:var(--dim) was a self reference, which CSS throws away, so every `color:var(--dim)` on the portal fell back to inherit: the captions, the sub-lines, the rail tails and the fine print all drew in their parent's colour, which on a project panel is white. The value is the one index.html, book.html, confirmed.html, guide.html, privacy.html, terms.html and dialog.js all already use, chosen because the older #5A616C was 3.19:1 on --ground and failed WCAG AA (index.html:21). Found 2026-09-10 measuring the app against the page: the app had the right colour and the website did not. */ --dim:#7A8392; --accent:#E39244; --accent-dim:#8A5B2C; --accent-tint:rgba(227,146,68,.12); --good:#7DB587; --warn:#E0B341; --bad:#E2725B; --display:"Archivo","Helvetica Neue",Arial,sans-serif; --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; } *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} a:hover{color:#F0A65C} .mono{font-family:var(--mono)} .cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} /* bar */ .bar{height:56px;display:flex;align-items:center;gap:28px;padding:0 32px;background:#0B0D11;border-bottom:1px solid var(--line)} /* the gap belongs to the mark only: the two words are separate flex items and take a normal word space (2026-09-20) */ .mark{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--text);display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none} .mark span{color:var(--accent);margin-left:.28em} .mark .logo{width:22px;height:22px;flex:none;display:block;margin-right:9px} .nav{display:flex;gap:4px;height:56px;align-items:stretch} .nav a{display:flex;align-items:center;padding:0 12px;color:var(--muted);font-weight:500;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px} .nav a.on{color:var(--text);border-bottom-color:var(--accent)} .barr{margin-left:auto;display:flex;align-items:center;gap:16px} .live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .live i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(125,181,135,.18)} .avatar{width:30px;height:30px;border-radius:50%;background:var(--raise2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--text);overflow:hidden;flex:none} .avatar.has{background:none}.avatar img,.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .m .av.has,.m.us .av.has{overflow:hidden;background:none;padding:0} /* panels */ .panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden} .rail{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .rail .tail{margin-left:auto;display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:12px;color:var(--dim)} .pbody{padding:14px 16px} /* pills */ .pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--raise);color:var(--muted);white-space:nowrap} .pill.accent{background:var(--accent-tint);color:var(--accent)} .pill.good{background:rgba(125,181,135,.14);color:var(--good)} .pill.warn{background:rgba(224,179,65,.14);color:var(--warn)} .pill.bad{background:rgba(226,114,91,.14);color:var(--bad)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:5px;font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;border:1px solid transparent;color:var(--text);background:transparent} .btn.primary{background:var(--accent);color:#0A0C10;border-color:var(--accent)} .btn.secondary{background:transparent;color:var(--text);border-color:#2A3240} .btn.ghost{background:transparent;color:var(--muted);padding:0 8px} .btn.danger{background:transparent;color:var(--bad);border-color:rgba(226,114,91,.4)} .btn.sm{height:30px;padding:0 10px;font-size:12px} .btn.icon{width:36px;padding:0;color:var(--muted);border-color:#2A3240} .btn svg{width:16px;height:16px} .btn:hover{filter:brightness(1.12)} .btn:disabled{opacity:.5;cursor:default;filter:none} /* inputs */ .input{height:36px;padding:0 12px;background:var(--ground);border:1px solid var(--line);border-radius:5px;color:var(--text);font-family:var(--body);font-size:14px;display:flex;align-items:center} .input.ph{color:var(--dim)} .seg{display:inline-flex;background:var(--ground);border:1px solid var(--line);border-radius:5px;padding:2px;gap:2px} .seg span{padding:4px 12px;border-radius:3px;font-size:13px;color:var(--muted);cursor:pointer} .seg span.on{background:var(--raise2);color:var(--text)} /* switch */ .sw{width:34px;height:20px;border-radius:10px;background:#2A3240;position:relative;flex:none} .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#98A0AB} .sw.on{background:var(--accent)} .sw.on::after{left:17px;background:#0A0C10} /* stage track */ .track{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px} .track div{display:flex;flex-direction:column;gap:8px} .track i{display:block;height:4px;border-radius:2px;background:var(--line)} .track .done i{background:var(--accent-dim)} .track .now i{background:var(--accent);box-shadow:0 0 10px rgba(227,146,68,.45)} .track span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .track .now span{color:var(--accent)} .track .done span{color:var(--muted)} /* kpi tiles */ .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .kpi{background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} .kpi .v{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1} .kpi .s{font-size:12px;color:var(--dim)} /* chat */ .feed{display:flex;flex-direction:column;gap:14px;padding:18px 18px 8px} .m{display:flex;gap:10px;max-width:78%;align-items:flex-start;flex:none} .m .av{width:30px;height:30px;border-radius:50%;background:var(--raise2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;color:var(--text);flex:none;margin-top:16px} .m.us .av{background:rgba(227,146,68,.25);border-color:rgba(227,146,68,.5);color:#F0A65C} .m .col{display:flex;flex-direction:column;gap:5px;min-width:0} .m.us{align-self:flex-end;flex-direction:row-reverse} .m.us .col{align-items:flex-end} .m.system .av{display:none} .m .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);display:flex;gap:8px} .m .b{padding:10px 14px;border-radius:12px 12px 12px 3px;background:#1C2330;border:1px solid #2A3341;font-size:14px;line-height:1.5;color:#F3F5F8} .m.us .b{border-radius:12px 12px 3px 12px;background:rgba(227,146,68,.22);border:1px solid rgba(227,146,68,.55)} .m .meta{color:#98A0AB} .m.us .meta{color:#E39244} .m .meta .seen{color:#98A0AB} /* staff only: the client has had this message in frame */ .m.failed .b{border:1px solid rgba(226,114,91,.6);background:rgba(226,114,91,.08)} /* A text on its way to HighLevel (2026-09-08): dimmer, with a spinner and the word, until HighLevel lists it. */ .m.sending .b{opacity:.72} .sending{color:#E0B341;display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0} .sendspin{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(224,179,65,.35);border-top-color:#E0B341;animation:msspin .7s linear infinite} .att{display:flex;width:max-content;max-width:100%;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border-radius:6px;background:var(--ground);border:1px solid var(--line);font-size:12.5px;color:var(--text)} .att svg{width:14px;height:14px;color:var(--muted)} .err{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--bad)} /* list rows */ .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)} .row:first-child{border-top:0;padding-top:0} .row .grow{flex:1;min-width:0} .row .t{font-size:14px;font-weight:500} .row .s{font-size:12px;color:var(--dim)} /* schedule */ .inst{display:grid;grid-template-columns:3px 1fr auto;gap:2px 12px;align-items:start;padding:9px 0;border-top:1px solid var(--line-soft)} .inst:first-child{border-top:0;padding-top:0} .inst .st{grid-row:1/3;align-self:stretch;border-radius:2px;background:var(--line)} .inst.paid .st{background:var(--good)} .inst.open .st{background:var(--warn)} .inst .l{font-weight:500;font-size:14px} .inst .a{font-family:var(--mono);font-size:14px;text-align:right} .inst .s{grid-column:2/4;font-size:12px;color:var(--dim)} .inst .s b{font-weight:500;color:var(--muted)} .inst .cta{grid-column:2/4;margin-top:6px} .bar-progress{height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:flex} .bar-progress i{display:block;height:100%} .ico{width:16px;height:16px;flex:none;color:var(--dim)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;color:var(--muted);background:var(--ground);border:1px solid var(--line);cursor:pointer} .chip.on{color:var(--text);border-color:#2A3240;background:var(--raise2)} /* ============================================================ Additions: what a static board does not need ============================================================ */ html,body{height:100%;overflow:hidden} [hidden]{display:none!important} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} input,textarea,select{font:inherit;color:var(--text);background:var(--ground);border:1px solid var(--line);border-radius:5px;padding:0 12px;height:36px;outline:none;width:100%} textarea{height:auto;padding:10px 12px;resize:none} input:focus,textarea:focus,select:focus{border-color:var(--accent)} select{appearance:none;-webkit-appearance:none} /* THE FRAME. Fills the window, drawn at 1.25x on a desktop (fit() in portal.js sets --fw and --fh to the window divided by the scale, so the layout is fluid and the drawing is zoomed). Pages scroll inside #page when they do not fit the height; the project page keeps its own bounded layout, where the chat feed and the side panel scroll. Before 2026-09-07 this was a fixed 1600 x 900 scaled to the window both ways. */ #frame{ position:absolute;left:50%;top:50%;width:var(--fw,100%);height:var(--fh,100%); transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center; background:var(--ground);display:flex;flex-direction:column;overflow:hidden; } #page{flex:1;min-height:0;padding:14px 32px 20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent} #page::-webkit-scrollbar{width:8px} #page::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} #page:has(> .body3){overflow:hidden} /* a page root grows with its content so #page scrolls; the project body stays bounded */ #page > .lp,#page > .tp,#page > .pp,#page > .cp,#page > .cl,#page > .lp2,#page > .sp{flex:1 0 auto;min-height:0;overflow:visible} footer.pfoot{flex:none;display:flex;justify-content:center;align-items:center;gap:18px;padding:9px 32px 11px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim,#5A616C)} footer.pfoot a{color:inherit;text-decoration:none}footer.pfoot a:hover{color:var(--text)} .signin .pfoot{position:absolute;left:0;right:0;bottom:0;border-top:0} #page:has(> .lp,> .tp,> .pp,> .cp,> .cl,> .lp2,> .sp){padding:0} .nav a{cursor:pointer} .nav a .pill{height:16px;font-size:9.5px;padding:0 5px;margin-left:6px} .barr button{color:var(--muted);font-size:12px} .barr button:hover{color:var(--text)} /* the header of a project page */ .phead{display:flex;flex-direction:column;gap:2px} .phead .back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#98A0AB} .phead .line{display:flex;align-items:flex-end;gap:20px} .phead h1{margin:0;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.025em;line-height:1.05} .phead h1.can{cursor:text;border-radius:4px;margin:0 -6px;padding:0 6px} .phead h1.can:hover{background:var(--raise);outline:1px dashed var(--line)} .phead .acts{margin-left:auto;display:flex;align-items:center;gap:10px} .phead .track{margin-top:8px;gap:6px} .phead .track span{white-space:normal;line-height:1.3;padding-right:8px} /* the body grid */ .body3{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px 52px;gap:14px;align-items:stretch} .body3 .panel{display:flex;flex-direction:column;min-height:0} /* chat: the tabs in the rail, the feed as the ONE scrolling element */ .chatrail{padding:8px 12px;gap:4px} .chatrail .seg{border:0;background:transparent;padding:0;gap:4px} .chatrail .seg span{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:13px;font-weight:500;padding:6px 12px;display:flex;align-items:center;gap:6px} .chatrail .seg span i{width:6px;height:6px;border-radius:50%;background:#E39244} .feed.scroll{flex:1;min-height:0;overflow-y:auto;justify-content:flex-start} .feed.scroll::-webkit-scrollbar{width:8px} .feed.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .feed .m .b{white-space:pre-wrap;overflow-wrap:anywhere} .feed .m .b img,.feed .m .b video{display:block;max-width:300px;max-height:200px;border-radius:8px;margin-top:8px;border:1px solid var(--line)} .feed .empty{margin:auto;color:var(--dim);font-size:13px} .m.system .b{background:transparent;border:1px dashed var(--line);color:var(--muted)} .composer{border-top:1px solid var(--line-soft);padding:12px 18px 14px;display:flex;flex-direction:column;gap:10px} .composer textarea{height:60px;padding:10px 12px;resize:none;overflow-y:hidden;line-height:20px} .composer .tools{display:flex;align-items:center;gap:8px} .composer .tools .hint{font-size:12px;color:var(--dim)} .composer .tools .send{margin-left:auto} .composer .subj{display:flex;gap:8px;align-items:center} .composer .subj input{flex:1} .emoji{display:none;flex-wrap:wrap;gap:2px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);position:absolute;bottom:110px;left:18px;width:320px;max-height:180px;overflow:hidden;z-index:5} .emoji.on{display:flex} .emoji button{width:28px;height:28px;font-size:18px;border-radius:4px} .emoji button:hover{background:var(--raise)} /* the side panel's pieces, as the board draws them */ .side .rail{padding:9px 14px} .side .pb{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .side .pb::-webkit-scrollbar{width:6px} .side .pb::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .card{margin:12px 14px 4px;padding:14px 16px;border-radius:8px;background:var(--raise);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px} .card .h{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:#EEF0F3} .card .p{font-size:13px;color:#C9CED6;line-height:1.5} .card .acts{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap} .sech{display:flex;align-items:center;padding:10px 14px 6px} .sech .cap{color:var(--dim)} .sech a,.sech button{margin-left:auto;font-size:12px;color:var(--accent);display:inline-flex;align-items:center;gap:4px} .secb{padding:2px 14px 4px;display:flex;flex-direction:column} .item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)} .item:first-child{border-top:0} .item .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .item .grow .t{font-size:13px;font-weight:500} .item .grow .s{font-size:11.5px;color:var(--dim)} .item .grow .s.warn{color:var(--warn)} .item .grow .s.bad{color:var(--bad)} .item .a{font-family:var(--mono);font-size:13px;white-space:nowrap} .item .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap;min-width:52px} .item .st.now{color:var(--accent)} .item .st.good{color:var(--good)} .item .st.warn{color:var(--warn)} .item .st.bad{color:var(--bad)} .item .links{display:flex;gap:10px;font-size:12px;font-weight:500} .item .links a,.item .links button{color:#98A0AB} .item .links a.on,.item .links button.on{color:var(--accent)} .item.done{opacity:.5} .item.done .t{text-decoration:line-through} .tick{width:16px;height:16px;border-radius:4px;border:1px solid #2A3240;flex:none;display:flex;align-items:center;justify-content:center;color:#7DB587} .tick.on{border-color:#7DB587;background:rgba(125,181,135,.18)} .meet{margin:8px 14px 12px;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;background:var(--accent-tint);border:1px solid rgba(227,146,68,.25)} .meet .d{font-family:var(--mono);font-size:11px;color:#E39244} .meet .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .meet .grow .t{font-weight:500;font-size:13px} .meet .grow .s{font-size:11.5px;color:#98A0AB} .meet .links{display:flex;gap:10px;font-size:12px;font-weight:500} .meet .links a,.meet .links button{color:#98A0AB} .meet .links a:first-child,.meet .links button:first-child{color:var(--accent)} .note{padding:6px 14px;font-size:12.5px;color:var(--dim)} .note.bad{color:var(--bad)} .pager{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 14px 10px;font-family:var(--mono);font-size:11px;color:var(--dim)} .pager button{color:var(--muted);padding:2px 6px} .pager button:disabled{color:var(--line)} .pager .n{margin-left:auto} .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;padding:2px 14px} .kv .k{color:var(--dim)} .kv .v{color:var(--text)} .box{margin:6px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;color:var(--muted);line-height:1.5} .box.warn{border-color:rgba(224,179,65,.4)} /* the icon rail */ .irail{width:52px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px} .irail button{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--dim);background:transparent;position:relative} .irail button:hover{color:var(--text)} .irail button.on{color:#E39244;background:var(--accent-tint)} .irail button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .irail button .dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%} .irail button .dot.red{background:#E2725B} .irail button .dot.yellow{background:#E0B341} /* view as */ .asbar{background:#E39244;color:#0A0C10;padding:7px 32px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;flex:none} .asbar a{margin-left:auto;color:#0A0C10;text-decoration:underline} /* popups */ .scrim{position:absolute;inset:0;background:rgba(8,9,12,.82);display:flex;align-items:center;justify-content:center;z-index:50} /* A popup is a panel over the page, as every *Popup board draws it: a rail for the title with the close icon in its tail, an 18px body with 14px gaps, the buttons as the body's last row. */ .pop{width:640px;max-width:92%;max-height:88%;background:#0E1116;border:1px solid var(--line);border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden} .pop.wide{width:760px} .pop.w600{width:600px} .pop .pt{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-soft);font-family:var(--body);font-size:15px;font-weight:600;color:#EEF0F3;letter-spacing:0;text-transform:none} .pop .pt small{font-size:12px;font-weight:400;color:#98A0AB;letter-spacing:0} .pop .pt .tail{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:400;color:#98A0AB} .pop .pt .tail .btn.icon{height:30px;width:30px} .pop .pc{padding:18px;display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0;font-size:13px} .pop .pc p{margin:0;font-size:13px;color:#98A0AB;line-height:1.5} .pop .pc .box{padding:12px 14px;border-radius:6px;background:var(--raise);display:flex;flex-direction:column;gap:6px} .pop .pf{padding:0 18px 18px;display:flex;gap:8px;justify-content:flex-end} .pop .f{display:flex;flex-direction:column;gap:5px} .pop .two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pop label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .pop label.plain{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--text);display:flex;gap:8px;align-items:center} .pop label.plain input{width:auto;height:auto} .pop .perr{color:var(--bad);font-size:12.5px} .toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--raise2);border:1px solid var(--line);color:var(--text);padding:8px 14px;border-radius:6px;font-size:13px;z-index:60} /* sign in (SignIn boards) */ .signin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ground)} .signin .col{width:440px;display:flex;flex-direction:column;gap:18px} .signin .col > .mark{font-size:22px;align-self:center} .signin .col > .mark .logo{width:30px;height:30px;margin-right:11px} .signin .box{padding:24px;display:flex;flex-direction:column;gap:14px;margin:0} .signin .h{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em} .signin .p{font-size:13px;color:#98A0AB;line-height:1.5} .signin .p b.mono{color:#EEF0F3;font-weight:500} .signin .p2{font-size:12.5px;color:var(--dim);line-height:1.5} .signin form{display:flex;flex-direction:column;gap:14px} .signin .f{display:flex;flex-direction:column;gap:6px} .signin .f input{height:36px;font-size:13.5px} .signin .f input.mono{font-family:var(--mono)} .signin .btn.w{height:40px;justify-content:center} /* the provider buttons: white, the vendor's mark at 18px, a real press (2026-09-20) */ .signin .oauths{display:flex;flex-direction:column;gap:10px} .signin .btn.oauth{height:44px;gap:11px;border-radius:7px;font-size:14px;font-weight:600;background:#fff;color:#111418;border-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.06);transition:transform .12s ease,box-shadow .12s ease,background .12s ease} .signin .btn.oauth svg{width:18px;height:18px;flex:none} .signin .btn.oauth:hover{filter:none;background:#F3F5F8;box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 -1px 0 rgba(0,0,0,.06);transform:translateY(-1px)} .signin .btn.oauth:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.35)} .signin .btn.oauth:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .signin .or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:11.5px} .signin .or span{flex:1;height:1px;background:var(--line)} .signin .code{display:flex;gap:8px;justify-content:space-between} .signin .code input{width:56px;height:52px;text-align:center;font-family:var(--mono);font-size:22px;padding:0} .signin .code input::placeholder{color:#3A4250} .signin .row{display:flex;justify-content:space-between;font-size:12.5px} .signin .row a,.signin .forgot{color:#98A0AB} .signin .forgot{font-size:12.5px;align-self:flex-start} .signin .who{display:flex;align-items:center;gap:8px;font-size:13px} .signin .who .mono{color:#EEF0F3} .signin .who a{font-size:12px;color:#98A0AB} .signin .err{margin:0;color:var(--bad);font-size:13px} .signin .foot{font-size:12px;color:var(--dim);text-align:center;line-height:1.5} /* two-factor (boards SignInSetup2fa, SignIn2fa, SignInBackupCodes) */ .signin .setup{display:flex;gap:16px;align-items:center} .signin .qrbox,.qrbox{width:128px;height:128px;border-radius:8px;background:#EEF0F3;padding:8px;flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;color:#0A0C10;font-size:11px;text-align:center} .qrbox canvas,.qrbox img{width:112px;height:112px;display:block} .signin .key{display:flex;flex-direction:column;gap:6px;min-width:0} .signin .key .mono{font-size:12px;color:#EEF0F3;word-break:break-all;line-height:1.5} .signin .key a{font-size:12px} .signin .code.sm input{height:48px;font-size:20px} .signin .chk{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#98A0AB;cursor:pointer} .signin .chk input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:4px;border:1px solid var(--line);margin:0;flex:none;background:transparent;cursor:pointer} .signin .chk input:checked{background:var(--accent);border-color:var(--accent)} .signin .chk.big{font-size:13px;color:#EEF0F3} .signin .chk.big input{width:18px;height:18px;border:2px solid #E39244} .signin .codes,.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding:12px 14px;border-radius:6px;background:var(--ground);border:1px solid var(--line)} .signin .codes .mono,.codes .mono{font-size:13px;color:#EEF0F3} .signin .row2{display:flex;gap:8px} .signin .btn.w[disabled]{opacity:.55;cursor:default} /* lists (Projects boards) */ .lists{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px} .lists .lh{display:flex;align-items:center;gap:14px} .lists .lh h1{margin:0;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.025em} .lists .lh .acts{margin-left:auto} .lists .cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .lists .panel .pbody{padding:6px 14px 10px;display:flex;flex-direction:column;min-height:0} .lrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line-soft);color:inherit} .lrow:first-child{border-top:0} .lrow .t{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em} .lrow .s{font-size:12px;color:var(--dim);margin-top:2px} .lrow .s .warn{color:var(--warn)} .lrow .d{font-family:var(--mono);font-size:11px;color:var(--dim)} .lrow:hover .t{color:var(--accent)} /* the avatar in the bar is a link to Account (§12) */ a.avatar{color:var(--text);text-decoration:none} a.avatar:hover{border-color:var(--accent)} /* MeetingPopup (design/MeetingPopup.html): video left, transcript right */ .pop.meeting{width:1180px;max-width:calc(100% - 40px)} .pop.meeting .pc{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding:18px} .mvid{aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#141922,#0B0D11);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .mvid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .mvid .play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff} .mvid .none{font-size:13px;color:#98A0AB} .mtr{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:560px} /* the in-app viewer (portal.js view): a document, picture, video or text, in a sheet */ .pop.viewer{width:960px;max-width:calc(100% - 40px);height:88%} .pop.viewer .pc{padding:0;gap:0;flex:1;display:flex;flex-direction:column;overflow:hidden;background:#0B0D11} .vpdf{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;position:relative} .vpdf canvas{max-width:100%;background:#fff;border-radius:2px;box-shadow:0 8px 30px rgba(0,0,0,.5)} .vpdf.fall{padding:0} .vfall{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff} .vfit{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto} .vimg{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px} .vvid{flex:1;min-height:0;width:100%;background:#000} .vtxt{flex:1;min-height:0;margin:0;padding:16px;font:12.5px/1.55 var(--mono,ui-monospace,Menlo,monospace);white-space:pre-wrap;word-break:break-word;color:var(--text);overflow:auto} .vmsg{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center} .vwait{display:flex;align-items:center;justify-content:center;gap:8px;color:#98A0AB;font-size:13px;padding:24px} .mtr .hd{display:flex;align-items:center;gap:8px} .mtr .hd span{font-size:11.5px;color:var(--dim)} .mtr input{height:30px;font-size:12.5px} .mtr .cues{overflow:auto;overflow-x:hidden;min-height:0;display:flex;flex-direction:column} .cue{display:flex;gap:10px;font-size:12.5px;line-height:1.45;padding:3px 6px;margin:0 -6px;border-radius:4px} .cue.on{background:var(--accent-tint)} .cue .at{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:36px;padding-top:2px} .cue.on .at{color:#E39244} .cue b{color:#EEF0F3;font-weight:600} .cue.hide{display:none} .pop.meeting .pt .tail{font-size:12px;color:#98A0AB;display:flex;align-items:center;gap:8px;margin-left:auto} /* chat attachments the boards draw: a one-time link, a video thumbnail */ .m .b .att.link{color:#E39244} /* the quoted message inside a reply (2026-10-09) */ .m .b .q{margin:-4px -8px 8px;padding:6px 10px;border-left:3px solid #E39244;border-radius:6px;background:rgba(255,255,255,.06);font-size:12.5px;line-height:1.35;color:var(--muted);cursor:pointer;max-width:420px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .m .b .q b{display:block;color:#F0A65C;font-weight:600;font-size:11.5px;margin-bottom:1px} .m.us .b .q{border-left-color:#F3F5F8;background:rgba(0,0,0,.18)} .m.flash .b{box-shadow:0 0 0 2px rgba(227,146,68,.75);transition:box-shadow .2s} .composer .replybar .re{max-width:100%} /* your pinned messages (2026-10-09): the rail button and the list */ .chatrail .pinsbtn{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:6px 8px;border-radius:3px;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:none} .chatrail .pinsbtn svg{width:15px;height:15px;color:#F0A65C} .chatrail .pinsbtn:hover{background:var(--raise2);color:var(--text)} .pop.pins .pc{max-height:60vh;overflow:auto} .pinrow{padding:10px 0;border-bottom:1px solid var(--line-soft)} .pinrow .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .pinrow .h b{color:#F0A65C;font-weight:600} .pinrow .t{margin:4px 0 6px;font-size:13.5px;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere} .pinrow .a{display:flex;gap:14px} .pinrow .a a{font-size:12px;color:var(--accent);cursor:pointer} .pinrow .a a:last-child{color:var(--dim)} .composer .replybar .re .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .m .b .att svg{width:14px;height:14px;flex:none} .m .b .vid{margin-top:8px;width:300px;border-radius:8px;position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#141922,#0B0D11);cursor:pointer;overflow:hidden} .m .b .vid .play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff} .m .b .vid .len{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:10.5px;color:#EEF0F3;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:3px} .m .b .vid video{position:absolute;inset:0;width:100%;height:100%} .m .b .pic{display:block;margin-top:8px;width:260px;height:150px;border-radius:8px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#141922,#0B0D11);position:relative} .m .b .pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);opacity:0;transition:opacity .15s ease .35s} .m .b .pic:not(.loaded) .ph{opacity:1} .m .b .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* ---- side panel rows, as the *Payments, *Meetings, *Files boards draw them ---- */ .side .cap.sec{display:block;padding:12px 14px 4px} .side .cap.sec:first-child{padding-top:10px} .h26{height:26px;font-size:11.5px} .h24{height:24px;font-size:12px} .pill.h18{height:18px;font-size:10px} .payl{padding-top:4px} .pay{display:grid;grid-template-columns:3px minmax(0,1fr) auto;gap:2px 10px;padding:9px 14px;border-top:1px solid var(--line-soft)} .pay .bl{grid-row:1/3;border-radius:2px;width:3px} .pay .bl.tall{grid-row:1/4} .pay .l{font-size:13px;font-weight:500} .pay .a{font-size:13px;text-align:right} .pay .s{grid-column:2/4;font-size:11.5px;color:var(--dim)} .pay .pa{grid-column:2/4;margin-top:6px} .pay .pa a{font-size:11.5px;color:#98A0AB;cursor:pointer} .pnote{padding:10px 14px 0;font-size:11.5px;color:var(--dim);line-height:1.5} .ds{padding:4px 14px 6px;display:flex;align-items:center;gap:10px;font-size:12.5px} .ds .avatar{width:22px;height:22px;font-size:9px} .ds .g{flex:1} .ds .g b{font-weight:500} .ds .dim,.ds .dim{color:var(--dim)} .ds a{font-size:12px;cursor:pointer} .act{display:flex;gap:10px;padding:6px 14px;font-size:12px} .act .mono{color:var(--dim);min-width:88px} .ypb{padding:6px 14px 10px;display:flex;flex-direction:column;gap:5px} .yp{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:1.3} .yp .r{display:flex;gap:10px} .yp .r .mono{color:var(--dim);font-size:11.5px} .yp .r .v{min-width:52px;text-align:right;color:var(--text);font-size:12.5px} .yt{display:flex;justify-content:space-between;font-size:13px;font-weight:600;padding-top:5px;border-top:1px solid var(--line-soft)} .yn{font-size:11.5px;color:#E0B341;line-height:1.45} .mrow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line-soft);color:inherit} .mrow[data-act]{cursor:pointer} .mrow .d{font-size:11px;color:var(--dim);min-width:40px} .mrow .d.on{color:#E39244} .mrow .g{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .mrow .g .t{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mrow .g .s{font-size:11.5px;color:var(--dim)} .mrow .links{display:flex;gap:8px;font-size:12px;font-weight:500} .mrow .links a{cursor:pointer} .mrow .links a.dim,.mrow .dim{color:#98A0AB} /* a bug row's Withdraw and a change row's Decline are class dim and read dim, as the app draws them (2026-09-14) */ .brow .dim,.crow .dim,.arow .dim{color:#98A0AB} .mrow .st{font-size:11.5px;color:var(--dim)} .fhead{padding:10px 14px 6px;display:flex;flex-direction:column;gap:8px} .fhead input{height:30px;font-size:12.5px} .frow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line-soft);color:inherit} .frow .g{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .frow .g .t{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .frow .g .s{font-size:11.5px;color:var(--dim)} .side .pager{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--dim);margin-top:auto} /* ---- Bugs, Changes, Code, Agreement panels ---- */ .cov{padding:10px 14px 6px;display:flex;flex-direction:column;gap:6px} .cov .l{display:flex;justify-content:space-between;font-size:12px} .cov .l span:first-child{color:#98A0AB} .brow,.crow,.arow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line-soft)} .arow{padding:7px 0} .brow.can,.crow.can{cursor:pointer} .brow .g,.crow .g,.arow .g{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .brow .g .t,.crow .g .t{font-size:13px;font-weight:500;line-height:1.3} .arow .g .t{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brow .g .s,.crow .g .s,.arow .g .s{font-size:11.5px;color:var(--dim)} .crow a.dim{font-size:11.5px;color:#98A0AB;cursor:pointer} .arow a{font-size:11.5px} .pill.w64{min-width:64px;justify-content:center} /* a panel's fine print: sentence case, readable (it shared the page footer's class and rendered as uppercase mono until 2026-09-07) */ .side .pfoot{padding:12px 14px;font-size:12px;color:var(--dim);line-height:1.5;margin-top:auto;border-top:1px solid var(--line-soft)} .codep{padding:12px 14px;display:flex;flex-direction:column;gap:8px} .codep .repo{font-size:12.5px;color:#EEF0F3} .codep .repo.dim{color:var(--dim)} .codep .s{font-size:12px;color:var(--dim)} .codep .inv{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#98A0AB} .codep .cmd{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;background:var(--ground);border:1px solid var(--line)} .codep .cmd .mono{font-size:11.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#C9CED6} .codep .cmd a{font-size:11.5px;cursor:pointer} .codep .box.hand{padding:10px 12px;font-size:12px;color:#98A0AB;line-height:1.5;gap:4px} .codep .box.hand .cap{display:block} .codep .warnbox{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:6px;border:1px solid rgba(224,179,65,.4);font-size:12px;color:#98A0AB;line-height:1.5} .codep .warnbox .cap{color:#E0B341} .codep .warnbox .btn{align-self:flex-start} .agr{padding:12px 14px;display:flex;flex-direction:column;gap:12px} .agr .doc{display:flex;align-items:center;gap:12px} .agr .doc .ic{flex:none;width:40px;height:50px;border-radius:4px;background:var(--raise);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#98A0AB} .agr .doc .g{display:flex;flex-direction:column;gap:2px} .agr .doc .t{font-weight:600;font-size:14px} .agr .doc .s{font-size:12px;color:var(--dim)} .agr .btns{display:flex;gap:8px} .agr .kvr{display:flex;gap:12px;padding:6px 0;border-top:1px solid var(--line-soft)} .agr .kvr .k{min-width:80px;font-size:12.5px;font-weight:500} .agr .kvr .v{font-size:12px;color:#98A0AB;line-height:1.45} .agr .s.fine{font-size:11.5px;color:var(--dim);line-height:1.5} /* the boards hide the feed scrollbar; it scrolls all the same */ .feed.scroll{scrollbar-width:none} .feed.scroll::-webkit-scrollbar{display:none} .codep .box.hand{border:0} /* ---- popup internals, as the *Popup boards draw them ---- */ .pop.inv,.pop.todo,.pop.req{width:640px} .pop.rep{width:560px} /* One box and the files (2026-09-08): a taller box with no resize handle, a drop zone a thumb can hit. */ .pop.rep .pc{gap:16px} .pop.rep .f textarea{min-height:150px;resize:none;font-size:14px;line-height:1.5} .pop.rep .drop{min-height:56px;padding:14px 16px;font-size:13.5px} .pop.rep .drop svg{width:18px;height:18px;flex:none} .pop.bug{width:760px} .pop.share{width:600px} .pop.quote{width:1000px} .pop.quote .pc{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start} .pop.quote .pc .perr{grid-column:1 / -1} .pop .col{display:flex;flex-direction:column;gap:12px;min-width:0} .pop .p{font-size:13px;color:#98A0AB;line-height:1.5} /* Invite to book / Meeting link: the length as a segmented row, the people as rows with a checkbox at the end. */ .pop.invite{width:560px} .pop.invite .pt{white-space:nowrap} .pop.invite .pt small{white-space:normal} .pop.invite .pc{gap:18px} .pop .seg.lens{align-self:flex-start} .pop .seg.lens span{padding:6px 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em} .pop .ppl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:4px} .pop .ppl .pr{display:flex;align-items:center;gap:12px;padding:9px 12px;cursor:pointer;background:var(--ground);border-top:1px solid var(--line-soft);font-family:var(--body);letter-spacing:0;text-transform:none} .pop .ppl .pr:first-child{border-top:0} .pop .ppl .pr:hover{background:var(--raise)} .pop .ppl .pr.locked{cursor:default} .pop .ppl .pr.locked:hover{background:var(--ground)} .pop .ppl .pr .g{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .pop .ppl .pr .n{font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pop .ppl .pr .s{font-size:12px;color:var(--dim)} .pop .ppl .pr input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:4px;border:1px solid #2A3240;margin:0;padding:0;flex:none;background:transparent;cursor:pointer;position:relative;transition:background .12s,border-color .12s} .pop .ppl .pr input:checked{background:var(--accent);border-color:var(--accent)} .pop .ppl .pr input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #0A0C10;border-width:0 2px 2px 0;transform:rotate(45deg)} .pop .ppl .pr input:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pop .ppl .pr input:disabled{cursor:default;opacity:.7} .pop .ppl .pr:has(input:checked) .avatar{border-color:var(--accent-dim)} .pop .p2{font-size:12px;color:var(--dim);line-height:1.5} .pop .p3{font-size:12.5px;color:var(--dim)} .pop .rt{font-size:14px;line-height:1.6;color:#C9CED6} .pop .f{display:flex;flex-direction:column;gap:6px} .pop .f textarea,.pop textarea{min-height:64px;padding:10px 12px;line-height:1.5;font-size:13px;resize:vertical} .pop .f input,.pop .f select{height:36px;font-size:13px} .pop .f input.mono{font-family:var(--mono)} .pop .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .pop .three{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px} .pop .grid2{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:end} .pop .rcs{display:flex;flex-direction:column;gap:6px} .pop .rc{display:flex;gap:10px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);cursor:pointer;align-items:flex-start} .pop .rc .dot{margin-top:2px} .pop.rep .rcs{flex-direction:row;gap:8px} .pop.rep .rc{flex:1;align-items:center;padding:9px 12px} .pop.rep .rc .dot{margin-top:0} .pop.inv .rc{align-items:center;padding:10px 12px;gap:12px} .pop.inv .rc .dot{margin-top:0} .pop .rc.on{border-color:rgba(227,146,68,.5);background:var(--accent-tint)} .pop .rc.off{cursor:default;color:var(--dim)} .pop .rc .dot{width:14px;height:14px;border-radius:50%;border:1px solid #2A3240;flex:none} .pop .rc.on .dot{border:1px solid #E39244;background:#E39244;box-shadow:inset 0 0 0 3px #0E1116} .pop .rc .g{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0} .pop .rc .t{font-size:13px;font-weight:500} .pop .rc.on .t{color:#EEF0F3} .pop .rc .s{font-size:11.5px;color:var(--dim)} .pop .rc .mono.dim{font-size:11px;color:#98A0AB} .pop .decide{gap:10px;padding:14px} .pop .decide textarea{background:var(--ground)} .pop .decide .btns{display:flex;gap:8px} .pop .btn.h40{height:40px} .pop .calc{padding:10px 12px;border-radius:6px;background:var(--ground);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px} .pop .calc .l{display:flex;justify-content:space-between;align-items:baseline} .pop .calc .l .p{font-size:12.5px} .pop .calc .v{font-size:18px;font-weight:500;color:#EEF0F3;white-space:nowrap} .pop .calc .s{font-size:11.5px;color:var(--dim);text-align:right;margin-top:-4px;min-height:0}.pop .calc .s:empty{display:none} /* two captions of different lengths: the inputs still sit on one line (2026-09-15) */ .pop .two .f input,.pop .two .f select{margin-top:auto} .pop .thread{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#98A0AB} .pop .thread b{color:#EEF0F3;font-weight:500} .pop .thread .dim{color:var(--dim)} .pop .files{display:flex;gap:10px;align-items:flex-start} .pop .files .shot{width:220px;height:130px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,#101419,#0B0D11);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px} .pop .files .att{margin:0} .pop .files .ml{margin-left:auto;font-size:12.5px} .pop .ml{font-size:12.5px} .pop .drop{border:1px dashed var(--line);border-radius:6px;padding:12px;display:flex;align-items:center;gap:10px;color:#98A0AB;font-size:13px;cursor:pointer} .pop .cks{gap:6px;padding:12px 14px} .pop .cks .cap{margin-bottom:2px} .pop .ck{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#98A0AB} .pop .ck.on{color:#EEF0F3} .pop .ck .bx{width:14px;height:14px;border-radius:3px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#7DB587;font-size:10px;flex:none} .pop .ck.on .bx{border-color:#7DB587;background:rgba(125,181,135,.2)} .pop .ck .g{flex:1} .pop .ck .mono.dim{font-size:11px;color:var(--dim)} .pop .ck[data-tick]{cursor:pointer} .pop .swrow{display:flex;align-items:center;gap:10px;height:36px} .pop .swrow span{font-size:13px;color:#98A0AB} .pop .who{display:flex;align-items:center;gap:10px;font-size:13px} .pop .who .avatar{width:28px;height:28px;font-size:10px} .pop .who .g,.pop .who select{flex:1} .pop .who .mono.dim{color:var(--dim)} .pop .rm{font-size:12px;color:#98A0AB;cursor:pointer;align-self:flex-start} .pop b.warn{color:#E0B341;font-weight:500} .pop .tail .pill{height:22px} /* Text & email: the threads strip and the channel tag */ .threads{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:12px} .threads .cap{margin-right:4px} .threads a{margin-left:auto;font-size:12px;cursor:pointer} .m .meta .ch{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#98A0AB;margin-left:8px} .m .meta .ch.sms{color:#7DB587} .m .meta a.rt{font-size:10.5px;margin-left:8px;color:var(--dim);text-transform:none;letter-spacing:0;cursor:pointer} .item .nudge{font-size:11.5px;color:#98A0AB;cursor:pointer} /* a short feed sits at the bottom, as the boards draw it; a long one scrolls */ .feed.scroll > :first-child{margin-top:auto} .pop .decide{margin:0;width:auto} /* the card's tone and button sizes, per the state boards */ .card.warn{background:rgba(224,179,65,.10);border-color:rgba(224,179,65,.45)} .card.warn .h{color:#E0B341} .card.good{background:rgba(125,181,135,.10);border-color:rgba(125,181,135,.4)} .card.good .h{color:#7DB587} .card.accent{background:var(--accent-tint);border-color:rgba(227,146,68,.4)} .card.accent .h{color:#E39244} .card.h40 .acts .btn{height:40px} .card.h36 .acts .btn{height:36px} .card.client .acts .btn{height:44px} .card.client .acts .btn.primary{flex:1;font-size:15px} /* Team only: your own notes are tinted, other people's are plain, as MainInternal draws it */ .empty-note{padding:10px 0;font-size:12.5px;color:var(--dim)} /* files on their way up: the Report and Request drop zones, and the chat composer */ .dropped{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .dropped:empty{display:none} .drop.over{border-color:#E39244;color:#E39244} .chip.bad{color:#E06C6C;border-color:#5A3A3A} .pending{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px} .pending:empty{display:none} .pending .chip .x{margin-left:6px;cursor:pointer;color:var(--dim)} .pending .chip .x:hover{color:#E8ECF1} .mvid video{width:100%;height:100%;object-fit:contain;background:#000;display:block} /* an admin's delete on a file row */ .frow .del{color:var(--dim);font-size:17px;line-height:1;padding:2px 7px;border-radius:6px;cursor:pointer;flex:none} .frow .del:hover{color:#E06C6C;background:rgba(224,108,108,.12)} /* email threads in the Text & email tab (design/portal.css, 2026-09-04) */ .mail{border:1px solid #2A3A52;border-radius:8px;background:#0F141C;overflow:visible;flex:none;align-self:stretch} .mail .subj{display:flex;align-items:center;gap:10px;padding:7px 16px;background:#16223A;border-bottom:1px solid #2A3A52;border-radius:8px 8px 0 0} .mail .subj span{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#DCE6F7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail .subj a{color:#7FA7E0} .mail .earlier{position:relative;top:-13px;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#1E2B44;border:1px solid #3A4E70;font-size:12px;font-weight:500;color:#DCE6F7} .mail .row.us{background:rgba(227,146,68,.08)} .mail .badge{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#16223A;display:flex;align-items:center;justify-content:center;color:#7FA7E0} /* what the board wrote inline on each element */ .mail.on{border-color:rgba(227,146,68,.55)} .mail .subj a{display:inline-flex;align-items:center;cursor:pointer;text-decoration:none} .mail .subj a.tg{transform:rotate(90deg)} .mail .subj a.tg.up{transform:rotate(-90deg)} .mail .pill-row{display:flex;justify-content:center;height:14px;position:relative;z-index:1} .mail .earlier{cursor:pointer} .mail .row{display:flex;align-items:flex-start;gap:12px;padding:8px 16px;border-top:1px solid #1F2B3F;cursor:pointer} .mail .pill-row + .row{border-top:0} .mail .row.open{padding:10px 16px;cursor:default} .mail .row .avatar{width:30px;height:30px;font-size:10px;flex:none;position:relative} .mail .row.us .avatar{background:rgba(227,146,68,.25);color:#F0A65C} .mail .row .badge{font-style:normal;font-size:9px} .mail .row .g{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35} .mail .row .g .n{font-size:13px;font-weight:600} .mail .row .g .t{font-size:13px;color:#C9CED6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail .row.open .g .t{color:#EEF0F3;white-space:pre-line;line-height:1.55;overflow:visible;text-overflow:clip} .mail .row .g .fs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .mail .row .g .fs .att{margin:0;font-size:12px} .mail .row .at{font-size:11px;color:#98A0AB;flex:none;padding-top:2px} .mail .row .ic{color:#98A0AB;flex:none;padding-top:1px;text-decoration:none;cursor:pointer} .mail .row .ic:hover{color:#EEF0F3} .feed.sms{gap:6px;padding-top:8px} .feed .m .b a.url{color:#E39244;text-decoration:underline;text-underline-offset:2px;word-break:break-all} .feed .mail .row .t a.url{color:inherit;text-decoration:underline;text-underline-offset:2px} .feed .m .b .mention{color:#E39244;font-weight:600} .feed .m .b .mention.me{background:rgba(227,146,68,.18);border-radius:4px;padding:0 3px} .feed .m.pinged .b{box-shadow:0 0 0 1px rgba(227,146,68,.35)} /* the @ picker above the composer */ .composer{position:relative} .mpick{position:absolute;left:18px;bottom:calc(100% - 4px);z-index:5;min-width:260px;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.45)} .mpick .mo{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer} .mpick .mo.on,.mpick .mo:hover{background:var(--raise2)} .mpick .mo .avatar{width:24px;height:24px;font-size:9px} .mpick .mo .n{font-size:13px;font-weight:500} .mpick .mo .s{font-size:11.5px;color:var(--dim);margin-left:auto} /* the reply chip in the Text & email composer (design/MainSms.html) */ .composer .rechip{padding-right:6px} .composer .rechip .re{display:inline-flex;align-items:center;gap:8px;padding:2px 4px 2px 10px;border-radius:6px;background:#1E2B44;border:1px solid #3A4E70;color:#DCE6F7;font-size:12.5px;max-width:60%;white-space:nowrap;overflow:hidden} .composer .rechip .re .mono{font-size:10px;color:#7FA7E0} .composer .rechip .re a{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;color:#DCE6F7;background:rgba(255,255,255,.08);cursor:pointer;flex:none} .composer .rechip > a{color:var(--accent);cursor:pointer;font-size:12px;margin-left:auto} /* the Text & email composer is shorter (design/MainSms.html, 2026-09-04) */ .composer.sms{padding:10px 18px 12px;gap:8px} .composer.sms textarea{height:44px} /* a bubble never grows past its column: long links are cut with an ellipsis, long words wrap (Jacob, 2026-09-04: "out of bounds") */ .m .col{max-width:100%} .m .b{min-width:0;max-width:100%;overflow-wrap:anywhere} .m .b .att{max-width:100%;min-width:0} .m .b .att .u{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m .b .att .dim{flex:none} /* a picture that loaded hides its placeholder (a transparent PNG showed both) */ .m .b .pic.loaded .ph{display:none} /* the invite card in a bubble (boards Main, Client, Developer, 2026-09-04) */ .m .b .inv{margin-top:8px;width:360px;max-width:100%;border-radius:8px;font-size:12.5px} .m .b .inv.gone{border:1px dashed var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px;color:var(--dim)} .m .b .inv.gone > svg{width:15px;height:15px;flex:none} .m .b .inv.gone span{flex:1} .m .b .inv.gone a{font-size:12px;color:var(--accent);cursor:pointer} .m .b .inv.card{border:1px solid rgba(125,181,135,.45);background:var(--ground);padding:12px 14px;display:flex;flex-direction:column;gap:8px;color:#EEF0F3} .m .b .inv.card.open{border-color:rgba(227,146,68,.45)} .m .b .inv .hd{display:flex;align-items:center;gap:8px} .m .b .inv .hd .ic{color:#7DB587;display:inline-flex} .m .b .inv.open .hd .ic{color:#E39244} .m .b .inv .hd .ic svg{width:16px;height:16px} .m .b .inv .hd .t{font-weight:600;font-size:13.5px;flex:1} .m .b .inv .hd .tag{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em} .m .b .inv .d{font-size:12px;color:#98A0AB} .m .b .inv .when{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;background:rgba(125,181,135,.1);border:1px solid rgba(125,181,135,.3)} .m .b .inv.open .when{background:rgba(227,146,68,.08);border-color:rgba(227,146,68,.3)} .m .b .inv .when > .mono{font-size:12px;color:#7DB587} .m .b .inv.open .when > .mono{color:#F0A65C} .m .b .inv .when .acts{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:12px;font-weight:500} .m .b .inv .when .acts a{color:#EEF0F3;cursor:pointer;text-decoration:none} .m .b .inv .when .acts a.dim{color:#98A0AB} .m .b .inv .when .acts .btn.sm{height:28px} /* BookPopup (design/BookPopup.html) */ .pop.book{width:980px;background:#0E1116} .pop.book .pc{padding:0} .pop.book .bk{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;min-height:0;height:600px} .pop.book .bl,.pop.book .bm,.pop.book .br{min-height:0;overflow:hidden} .pop.book .bl{padding:18px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px} .pop.book .bl .who{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500} .pop.book .bl .avs{display:flex} .pop.book .bl .avatar{width:34px;height:34px;font-size:11px} .pop.book .bl .tt{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em} .pop.book .bl .ln{display:flex;align-items:center;gap:8px;font-size:13px;color:#C9CED6} .pop.book .bl .ln .ic{display:inline-flex;color:#98A0AB} .pop.book .bl .ln .ic svg{width:15px;height:15px} .pop.book .bl .ln .zn{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--raise);border:1px solid var(--line)} .pop.book .bl .fine{font-size:12px;color:var(--dim);line-height:1.5;margin-top:auto} .pop.book .bm{padding:18px;display:flex;flex-direction:column;gap:12px} .pop.book .bm .mh{display:flex;align-items:center;font-weight:600;font-size:15px} .pop.book .bm .mh .nav{margin-left:auto;display:flex;gap:6px} .pop.book .bm .mh .btn.icon{width:28px;height:28px} .pop.book .bm .mh .btn.icon svg{width:14px;height:14px} .pop.book .bm .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} .pop.book .bm .grid .cap{text-align:center} .pop.book .bm .grid .dy{height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-family:var(--mono);font-size:13px;color:#3A4250} .pop.book .bm .grid .dy.free{color:#EEF0F3;background:var(--raise);border:1px solid var(--line);cursor:pointer} .pop.book .bm .grid .dy.free:hover{border-color:rgba(227,146,68,.5)} .pop.book .bm .grid .dy.on{border-color:#E39244;color:#F0A65C} /* the placeholder while the free times are read */ .pop.book .grid.sk .dy{background:var(--raise);opacity:.35} .pop.book .tl.sk > .mono{border-color:var(--line);opacity:.45} .pop.book .bm .mh .nav .sendspin{margin:6px} .pop.book .br{padding:18px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px} .pop.book .br .dh{font-weight:600;font-size:14px} .pop.book .br .dn{font-size:12px;color:var(--dim)} .pop.book .br .tl{display:flex;flex-direction:column;gap:6px;margin-top:4px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#2A3341 transparent} .pop.book .br .tl::-webkit-scrollbar{width:6px} .pop.book .br .tl::-webkit-scrollbar-thumb{background:#2A3341;border-radius:3px} .pop.book .br .tl > *{flex:none} .pop.book .br .tl > .mono{height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(227,146,68,.35);color:#F0A65C;font-size:13px;cursor:pointer} .pop.book .br .tl > .mono:hover{border-color:#E39244} .pop.book .br .pick{display:flex;gap:6px} .pop.book .br .pick .mono{flex:1;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--raise);border:1px solid #E39244;font-size:13px} .pop.book .br .pick .btn{height:36px} .m .b .inv .when{flex-wrap:wrap;row-gap:6px} .m .b .inv .when > .mono{white-space:nowrap;font-size:11.5px} .m .b .inv .when .acts{white-space:nowrap} /* Notifications (2026-09-07): the unread bubble on a project row, a chat tab, a rail icon, the bell. */ /* Something is happening (2026-09-08): the bar at the top while a request is in flight; the pressed button shows a spinner and locks. */ #msbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:1000;opacity:0;pointer-events:none;transition:width .25s ease,opacity .3s ease} #msbar.on{opacity:1;animation:msbar 8s cubic-bezier(.1,.6,.3,1) forwards} #msbar.done{animation:none;width:100%;opacity:0;transition:width .15s ease,opacity .4s ease .15s} @keyframes msbar{0%{width:0}20%{width:45%}60%{width:75%}100%{width:90%}} @keyframes msspin{to{transform:rotate(360deg)}} .busy{position:relative;pointer-events:none;color:transparent!important;text-shadow:none!important} .busy svg,.busy img{visibility:hidden} .busy::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#EEF0F3;animation:msspin .7s linear infinite} .btn.primary.busy::after{border-color:rgba(20,20,20,.3);border-top-color:#141414} .busy.sm::after,.busy.h26::after{width:13px;height:13px;margin:-6.5px 0 0 -6.5px} .nb{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:#E39244;color:#141414;font-family:var(--mono);font-size:10px;font-weight:700;line-height:16px;margin-left:6px;vertical-align:middle;letter-spacing:0} .prow .nb{margin-left:8px} .irail .nb{position:absolute;top:2px;right:2px;margin:0;min-width:14px;height:14px;font-size:9px;line-height:14px;padding:0 4px} .chatrail [data-tab] .nb{margin-left:6px} .barr{position:relative} .bell{position:relative;width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);background:transparent;border:0;cursor:pointer;margin-right:8px} .bell:hover{color:var(--text);background:var(--raise)} .bell svg{width:18px;height:18px} .bell .nb{position:absolute;top:2px;right:0;margin:0} .whatsnew{position:absolute;right:0;top:44px;width:380px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;z-index:60;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.35)} .whatsnew h4{margin:6px 10px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between} .whatsnew h4 a.all{font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--accent);text-decoration:none;padding:0;margin:0} .whatsnew h4 a.all:hover{text-decoration:underline;background:none} .mhd .r a.all{font-size:13px;color:var(--accent);text-decoration:none;white-space:nowrap;padding:8px 0} .whatsnew a{display:block;padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none} .whatsnew a:hover{background:var(--raise)} .whatsnew a .p{display:block;font-size:11px;color:#E39244;font-family:var(--mono);letter-spacing:.04em} .whatsnew a .t{display:block;font-size:11px;color:var(--muted);margin-top:2px} .whatsnew .empty{padding:14px 10px;color:var(--muted);font-size:13px} /* ============================================================ The window, not the board (2026-09-07) ============================================================ Jacob's instruction of 2026-09-07: assess each page as it renders, use the boards for branding only. Two things follow. The frame fits the window (see fit() in portal.js and #frame above), so the rules below settle what a wide window and a narrow one look like. And nothing is clipped: a page that does not fit the height scrolls in #page, the project side panel scrolls in .pb. */ /* ---- wide windows: the list column sits in the middle ---- */ #page > .lp{width:100%;max-width:1100px;align-self:center} #page > .lp2,#page > .tp,#page > .pp,#page > .cp,#page > .cl{width:100%;max-width:1720px;align-self:center} #page > .sp{width:100%;max-width:1720px;align-self:center;align-items:start} /* the Settings panel ends where its content ends instead of stretching to the footer */ /* Team: two lines of buttons per person instead of three (250px, was 200px). Scoped to #frame so it beats the page's own rule. */ #frame .tg{grid-template-columns:40px minmax(0,1.2fr) 96px 150px 130px minmax(0,1.2fr) 150px 250px} /* ---- the app banner: phones only (2026-09-21) ---- */ .appbar{display:none} @media (max-width:759px){ .appbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0B0D11;border-bottom:1px solid var(--line)} .signin .col .appbar{border:1px solid var(--line);margin-bottom:2px} .appbar .logo{width:28px;height:28px;flex:none} .appbar .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .appbar .t b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text)} .appbar .t span{font-size:12px;line-height:1.3;color:var(--muted)} .appbar .get{flex:none;background:var(--accent);color:#0A0C10;font-weight:700;font-size:12px;padding:8px 12px;text-decoration:none;border-radius:3px} .appbar .x{flex:none;background:none;border:0;color:var(--muted);font:inherit;font-size:12px;padding:8px 4px;cursor:pointer} } /* ---- narrow windows (phones): one column, nothing scaled ---- */ @media (max-width:759px){ #frame #page{padding:12px 14px 16px;gap:10px} #frame #page:has(> .lp,#frame > .tp,#frame > .pp,#frame > .cp,#frame > .cl,#frame > .lp2,#frame > .sp){padding:0} /* the bar wraps: mark and bell on the first line, the nav on its own line */ #frame .bar{height:auto;flex-wrap:wrap;padding:0 14px;gap:0 12px} #frame .mark{height:48px;display:flex;align-items:center;font-size:16px} #frame .mark .logo{width:20px;height:20px;margin-right:8px} #frame .barr{height:48px;margin-left:auto;gap:12px} #frame .nav{order:3;flex-basis:100%;height:40px;gap:0;margin:0 -14px;padding:0 8px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line-soft)} #frame .nav::-webkit-scrollbar{display:none} #frame .nav a{padding:0 10px;font-size:13px;white-space:nowrap;margin-bottom:0} #frame .asbar{padding:7px 14px;font-size:12px;flex-wrap:wrap;gap:6px 12px} #frame footer.pfoot{padding:8px 14px 10px;gap:8px 14px;flex-wrap:wrap;font-size:10px;text-align:center} /* popups fill the width, one column inside */ #frame .pop,#frame .pop.wide,#frame .pop.w600,#frame .pop.inv,#frame .pop.todo,#frame .pop.req,#frame .pop.rep,#frame .pop.bug,#frame .pop.share,#frame .pop.quote,#frame .pop.invite,#frame .pop.meeting,#frame .pop.np,#frame .pop.reassign{width:auto;max-width:calc(100% - 20px);max-height:94%} #frame .pop .pc{padding:14px;gap:12px} #frame .pop .pt{padding:10px 14px} #frame .pop .pf{padding:0 14px 14px;flex-wrap:wrap} #frame .pop .two,#frame .pop .three,#frame .pop .grid2,#frame .pop.quote .pc,#frame .pop.meeting .pc,#frame .pop.reassign .mv,#frame .pop.np .pc{grid-template-columns:minmax(0,1fr)} #frame .pop .pc > *{min-width:0} #frame .np .acts{flex-wrap:wrap} #frame .np .f.wide,#frame .np .fine,#frame .np .acts,#frame .np .err{grid-column:1} #frame .pop.rep .rcs{flex-direction:column} #frame .pop .files{flex-wrap:wrap} #frame .pop .files .shot{width:100%;height:160px} #frame .mtr{max-height:none} #frame .toast{max-width:calc(100% - 28px);text-align:center} /* sign in */ #frame .signin{align-items:flex-start;padding:36px 14px 80px} #frame .signin .col{width:100%;max-width:440px;margin:0 auto} #frame .signin .box{padding:18px} #frame .signin .code{gap:6px} #frame .signin .code input{width:100%;height:48px;font-size:20px} #frame .signin .setup{flex-direction:column;align-items:flex-start} /* the project page: rail on top, the panel under it, the chat fills the rest */ #frame .phead .line{flex-wrap:wrap;gap:8px 12px;align-items:center} #frame .phead h1{font-size:22px} #frame .phead .acts{margin-left:0;flex-basis:100%;flex-wrap:wrap;gap:8px} #frame .phead .track{display:flex;gap:3px;margin-top:6px} #frame .phead .track div{flex:1;min-width:0} #frame .phead .track div.now{flex:3} #frame .phead .track span{display:none} #frame .phead .track .now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:0} #frame .body3{display:flex;flex-direction:column;gap:10px;min-height:0} #frame .body3 > .panel:first-child{order:3;flex:1 1 auto;min-height:220px} #frame .body3 .side{order:2;flex:0 1 auto;max-height:32vh} #frame:has(> #page > .body3) footer.pfoot{display:none} #frame .phead .back{font-size:12px} #frame .phead .line{gap:6px 10px} #frame .irail{order:1;width:auto;flex:none;flex-direction:row;justify-content:space-around;padding:4px 6px;gap:2px} #frame .irail button{width:36px;height:36px} #frame .chatrail{flex-wrap:wrap;padding:6px 8px;gap:6px} #frame .chatrail .seg span{padding:6px 8px;font-size:12.5px} #frame .chatrail .tail{margin-left:auto} #frame .feed{padding:12px 12px 6px;gap:12px} #frame .m{max-width:94%} #frame .m .b .vid{width:100%;max-width:300px} #frame .composer{padding:10px 12px 12px;gap:8px} #frame .composer .tools .hint{display:none} #frame .card{margin:10px 10px 4px;padding:12px 14px} #frame .card .h{font-size:18px} #frame .card.client .acts .btn{height:40px} #frame .emoji{width:calc(100% - 24px);left:12px} #frame .mpick{left:12px;right:12px;min-width:0} /* Projects: each row wraps, the pill and date on a second line */ #frame .lp,#frame .lp.client{padding:14px 14px 20px;gap:12px} #frame .lp h1,#frame .lp.client h1{font-size:24px} #frame .lp .lh{flex-wrap:wrap;gap:10px;align-items:center} #frame .lp .lh .btn{margin-left:0} #frame .wrow,#frame .prow{flex-wrap:wrap;padding:10px 14px;gap:6px 10px} #frame .wrow .grow,#frame .prow .grow{flex:1 0 100%} #frame .prow .d{min-width:0;text-align:left;margin-left:auto} #frame .wrow .pill,#frame .prow .pill{white-space:normal;height:auto;min-height:20px;padding:2px 8px;line-height:1.3} /* Team, Clients: the head stacks; the table keeps its columns and scrolls sideways */ #frame .tp,#frame .lp2{padding:14px;gap:12px} #frame .tp h1,#frame .lp2 h1{font-size:24px} #frame .tp .th,#frame .lp2 .th{flex-wrap:wrap;gap:10px} #frame .tp .th input,#frame .lp2 .th input{margin-left:0;width:100%} #frame .tp .panel,#frame .lp2 .panel{overflow-x:auto} #frame .tp .tg{min-width:980px} #frame .lp2 .cg{min-width:900px} #frame .tp .foot,#frame .lp2 .foot{flex-wrap:wrap} /* Payouts, Pay: tiles wrap, one column of panels */ #frame .pp{padding:14px;gap:12px} #frame .pp h1{font-size:24px} #frame .pp .ph{flex-wrap:wrap;gap:10px} #frame .tiles{margin-left:0;width:100%;flex-wrap:wrap} #frame .tile{min-width:0;flex:1 1 140px} #frame .tile .s{max-width:none;white-space:normal} #frame .pg{grid-template-columns:1fr;flex:none} #frame .nx{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 14px} #frame .nx.hd{display:none} #frame .nx .what{grid-column:1 / -1} #frame .nx .btn,#frame .nx .stc{grid-column:1 / -1;justify-self:start} #frame .nx .stc .m{align-items:flex-start} #frame .bp{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;padding:10px 14px} #frame .bp.hd{display:none} #frame .bp .pill{grid-column:1} #frame .bp .rel{grid-column:1 / -1} #frame .pr,#frame .po,#frame .yd{flex-wrap:wrap} /* Calendar */ #frame .cl{padding:14px;gap:16px} #frame .cl h1{font-size:26px} #frame .cl .g{grid-template-columns:1fr} #frame .opts{grid-template-columns:1fr} #frame .day .rg input{width:84px} /* Coverage */ #frame .cp{padding:14px;gap:12px} #frame .cp h1{font-size:24px} #frame .plans{grid-template-columns:1fr} #frame .fine{grid-template-columns:1fr;gap:14px} #frame .strip{flex-wrap:wrap} #frame .cp .row{flex-wrap:wrap} /* Settings: the tabs become a strip above one column */ #frame .sp{grid-template-columns:1fr;padding:14px;gap:12px} #frame .sp .side{gap:10px} #frame .sp h1{font-size:24px} #frame .sp .tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:4px} #frame .sp .tabs::-webkit-scrollbar{display:none} #frame .sp .tab{flex:none;padding:8px 10px} #frame .sp .tab .tx span{display:none} #frame .sp .side .fn{display:none} #frame .sp .body{padding:14px} /* minmax(0,1fr), not 1fr: a 1fr track will not shrink below its content, so one wide field pushed every Rules row past the edge of a phone (2026-09-20) */ #frame .sp .g2,#frame .sp .g2.av,#frame .sp .g3,#frame .sp .fg{grid-template-columns:minmax(0,1fr)} #frame .sp .who{flex-wrap:wrap} #frame .sp .who .btn{margin-left:0} #frame .sp .kv{flex-wrap:wrap} #frame .sp .kv .k{min-width:0;flex-basis:100%} #frame .sp .inv{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px} #frame .sp .inv .n,#frame .sp .inv .lk{grid-column:1 / -1} #frame .sp .inv .lk{justify-content:flex-start} #frame .sp .svc{grid-template-columns:1fr;gap:6px} #frame .sp .svc .ac{justify-content:flex-start} #frame .sp .nr{grid-template-columns:minmax(0,1fr) 44px 44px 44px;gap:6px} #frame .sp .nr.staff{grid-template-columns:minmax(0,1fr) 44px} #frame .sp .day{grid-template-columns:44px 34px minmax(0,1fr) 16px minmax(0,1fr);gap:6px} #frame .sp .steps{max-width:none} #frame .sp .acts{flex-wrap:wrap} /* Start new project */ #frame .np .sr{grid-template-columns:minmax(0,1fr) 44px 80px 28px;gap:8px} #frame .np .sr .when{display:none} #frame .np .share{flex-wrap:wrap;height:auto} /* fixes from the first phone pass (2026-09-07) */ #frame .sp{grid-template-columns:minmax(0,1fr)} #frame .sp .side,#frame .sp .main{min-width:0} #frame .cp .row .grow,#frame .now .row .grow{flex:1 0 100%} #frame .pp .rail,#frame .cp .rail,#frame .tp .rail,#frame .lp2 .rail{flex-wrap:wrap;gap:6px 10px} #frame .pp .rail .tail,#frame .cp .rail .tail,#frame .tp .rail .tail,#frame .lp2 .rail .tail{flex-basis:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap} #frame .tp .panel .tg{min-width:1300px} /* the fixed columns take 914px; the two fr columns need room for a name and a project list */ #frame .lp2 .panel .cg{min-width:1200px} #frame .tp .panel,#frame .lp2 .panel{overflow-x:auto;overflow-y:hidden} } /* ============================================================ THE PHONE (2026-09-08; decisions/2026-09-08-mobile-audit-and-design.md) ============================================================ Under 760px the frame is the document: no transform, drawn at 1x, scrolling with the page so the keyboard and the safe areas behave. The bar and nav give way to a header per screen (.mhd, filled by Portal.mhead) and a tab bar at the thumb (.tabbar). The bell opens What's new as a screen (.mscreen). Popups are bottom sheets. Every target is 44px. The project page keeps a bounded layout (html.bounded) so its feed scrolls and its composer stays above the keyboard; every other page scrolls as a document. Selectors carry html.narrow so they beat the page's own