/* * CENTRAL MANAGEMENT - corrections the frozen design stylesheets cannot take. * * app.css, conversations.css and mail.css are the design, verbatim, and are never edited. * This file loads after all three on portal screens only - the same arrangement as * wp-adapt.css on the website. Every rule here names the collision it corrects. */ /* * THE ADMIN CENTER ROW (client, 15 Sep: "the Admin Center icon is glitching and the dot is not * placed right"). * * 1. app.css gives BOTH `.sp-nav .dot` and `.sp-chev` margin-left:auto. Two auto margins in one * flex row split the free space between them, so the red dot floated half way along the row, * 17px from the label and 17px from the chevron. The dot keeps the space; the chevron sits * straight after it, as the dot and count do on every other row. * 2. `.sp-nav svg` (17px, stroke 1.7) outranks `.sp-chev` (13px, stroke 2), so the chevron was * drawn as a full-size icon beside the gear - the heavy, jumpy arrow. It gets back the size * and weight app.css wrote for it. */ .sp-nav.parent .dot + .sp-chev{margin-left:0} .sp-nav .sp-chev{width:13px;height:13px;stroke-width:2} /* ---------------------------------------------------------------- the portal's own fonts 3 Oct 2026 (bug hunt, handoff 89). cm/fonts.css pointed at ../fonts/cm/ - relative to assets/css/cm/ that is assets/css/fonts/cm/, which does not exist, so Outfit, Plus Jakarta Sans and Spline Sans Mono never loaded anywhere the portal design is used (the staff portal, and the customer sign in, create account and account screens): two 404s on every one of those pages, and the browser's fallback face instead of the design's. cm/fonts.css is fixed too, but it is @imported without a version and the host caches it for 31 days, so the same faces are declared again HERE - this file carries a version - with the path that is right from assets/css/. A later @font-face for the same family, weight, style and range wins. */ @font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/cm/outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/cm/outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/cm/plus-jakarta-sans-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/cm/plus-jakarta-sans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/cm/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/cm/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/cm/spline-sans-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/cm/spline-sans-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ---------------------------------------------------------------- the staff portal on a phone 3 Oct 2026 (client: phone check of the staff portal's inside screens, handoff 88). The design's own phone block (max-width:900px, above) turns the rail into a sideways strip and hides the clocks and the search. Four things it left broken, measured at 375px on every screen: 1. THE TOP BAR's grid keeps three columns after the clocks and search are hidden, so the bell, theme switch and account menu are squeezed into the first third and pushed off the left edge (the bell sat at -21px - half of it off the screen, on every screen). One column, right-aligned, as the bar is on a desk. 2. ADMIN CENTER could not be reached from a phone at all: the strip hides .sp-railfoot, which is where it lives. Its four sections now sit at the end of the strip as ordinary strip items; the "Admin Center" parent itself is left out, since it only opens them. 3. PANEL TITLES were squeezed into a column one word wide when a long status pill shared the row ("Why nobody has written yet" took five lines on Team room). The row may now wrap, so the pill drops under the title instead. 4. TEXT SIZE. The portal is authored at 1x and scaled to 1.12 on a desk (top of this file), but left at 1x on a phone, where its small caps are 9.5-10.5px. The same mechanism, at 1.16, brings the smallest to 11px - the phone floor agreed for the website (handoff 82). It scales the screens evenly, so nothing changes shape; the layout is laid out in 375 / 1.16 = 323 CSS pixels, which every screen was checked at. */ @media(max-width:900px){ .sp-top{grid-template-columns:minmax(0,1fr);padding:0 14px} .sp-rail .sp-railfoot{display:flex;flex-direction:row;align-items:center;gap:4px;margin:0;padding:0;border:0} .sp-rail .sp-railfoot .sp-nav.parent{display:none} .sp-rail .sp-railfoot .sp-kids, .sp-rail .sp-railfoot .sp-kids>div{display:contents} .sp-rail .sp-railfoot .sp-kidwrap{flex-direction:row;gap:4px;margin:0;padding:0} .sp-rail .sp-railfoot .sp-kidwrap::before{display:none} .sp-rail .sp-railfoot .sp-kid{white-space:nowrap;padding:9px 11px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--sp-dim)} .sp-rail .sp-railfoot .sp-kid.on{color:#fff;background:var(--att-gradient)} .sp-rail .sp-railfoot .sp-kid.on::before{display:none} .sp-rail .sp-railfoot .sp-kid .n{margin-left:6px} .sp-panelhd{flex-wrap:wrap} } /* Below 900px only: at exactly 900 the desk's 1.12 zoom on #root also applies, and the two would multiply. */ /* On .sp-app, not #root as on a desk: the staff sign-in door shares #root and has its own phone sizes (portal/login.php), so it must not grow with the screens behind it. */ @media(max-width:899.98px){ :root{--sp-zoom:1.16} .sp-app{zoom:var(--sp-zoom)} } /* The Customer Portal's account search (portal/parts/admin-portal.php). The class was in the markup and never in this file, so it drew as a browser-default box with a white border. The design gives this search the look of the top bar's .sp-search field (sp-customers.jsx); that class cannot be reused here because the phone block hides .sp-search. Same values, no mark. */ .sp-find{box-sizing:border-box;width:min(280px,100%);padding:9px 16px;border-radius:var(--att-r-pill);border:1px solid var(--sp-line);background:var(--sp-field);color:var(--sp-ink);font-size:12.5px;outline:none;transition:all .18s} .sp-find::placeholder{color:var(--sp-dim2)} .sp-find:focus{border-color:var(--att-red-300);background:var(--sp-raise)} /* NO ZOOM ON TAP, staff portal on a phone (second audit, 9 Oct): same iOS rule as the customer screens - any field under 16px zooms the page. */ /* ANY TOUCH SCREEN ABOVE 900px (third hunt, 11 Oct): an iPhone held sideways (852-932px) and an iPad get the desk layout, where the fields are the design's 13.5px and iOS zooms into them. The doors get a plain 16px; inside the app #root is zoomed 1.12 from 900px up, so 14.5px x 1.12 = 16.2px. This block sits BEFORE the one below on purpose: under 900px the later 14px rule of equal specificity wins. */ @media (hover: none) and (pointer: coarse) { .sp-f input:not([type=checkbox]):not([type=radio]), .sp-f select, .sp-f textarea { font-size: 16px; } .sp-app .sp-f input:not([type=checkbox]):not([type=radio]), .sp-app .sp-f select, .sp-app .sp-f textarea, .sp-app .sp-search input, .sp-app .sp-find, .sp-app .pl-mail-compose input, .sp-app .pl-mail-compose textarea { font-size: 14.5px; } .sp-f .att-code input:not([type=checkbox]):not([type=radio]) { font-size: 22px; } } @media (max-width: 899.98px) { /* Inside the zoomed app only: 14px x the portal's phone zoom of 1.16 = 16.2px, which is what iOS needs. Scoped to .sp-app on 11 Oct: this sheet loads AFTER customer.css, and the unscoped rule was winning on the doors that have no zoom (the staff sign-in in portal/login.php and every customer screen), putting their fields back to a real 14px - an iPhone zoomed into the sign-in box. */ .sp-app .sp-f input:not([type=checkbox]):not([type=radio]), .sp-app .sp-f select, .sp-app .sp-f textarea, .sp-app .sp-search input, .sp-app .sp-find, .sp-app .pl-mail-compose input, .sp-app .pl-mail-compose textarea { font-size: 14px; } /* Outside .sp-app the zoom is 1, so the fields need a plain 16px. Lower specificity than the rule above on purpose: inside the app the 14px wins, outside it only this applies. */ .sp-f input:not([type=checkbox]):not([type=radio]), .sp-f select, .sp-f textarea { font-size: 16px; } /* The six code boxes keep the design's 22px. */ .sp-f .att-code input:not([type=checkbox]):not([type=radio]) { font-size: 22px; } } /* A REFUSAL IS NOT A TICK (client, 26 Oct): the company portal said "The email must be a company address ending in @..." in the success toast, green tick and all, so it read as "accepted". Same toast, red edge and red glyph. Set by company/shell.php. */ .sp-toast.is-bad { border-color: color-mix(in oklab, var(--sp-red) 55%, transparent); } .sp-toast.is-bad svg { stroke: var(--sp-red); } /* ACCOUNT STANDING (client, 26 Oct, inc/accounts.php). --------------------------------------- The red line an account ON HOLD sees above its bills: the customer's own page and the company's Billing room. Same red as the refusal toast above. */ .att-acct-hold { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 0 0 16px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--sp-red) 55%, transparent); background: color-mix(in oklab, var(--sp-red) 11%, transparent); } .att-acct-hold .ic { flex: none; margin-top: 1px; color: var(--sp-red); } .att-acct-hold .ic svg { stroke: var(--sp-red); } .att-acct-hold b { display: block; font-size: 14px; color: var(--sp-head); } .att-acct-hold p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sp-head); } .att-acct-hold p.ways { font-size: 12.5px; color: var(--sp-dim); } .att-acct-hold p.ways a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* In the company portal it sits between the top bar and the page, with the page's own padding. */ .att-acct-hold-wrap.sp-page { padding-bottom: 0; } .att-acct-hold-wrap .att-acct-hold { margin: 0; } /* The pop-up at sign-in: the portal's modal, a round glyph, the two ways to reach us. */ .att-acctpop { max-width: min(460px, calc(100% - 32px)); z-index: 91; } .att-acctpop-scrim { z-index: 90; } .att-acctpop-bd { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px 24px 22px; } .att-acctpop-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--sp-red); background: color-mix(in oklab, var(--sp-red) 13%, transparent); } .att-acctpop-ic svg { stroke: var(--sp-red); } .att-acctpop-ic.is-hold_member { color: var(--sp-warn); background: rgba(217,136,31,.14); } .att-acctpop-ic.is-hold_member svg { stroke: var(--sp-warn); } .att-acctpop-ic.is-closed { color: var(--sp-dim); background: var(--sp-field); } .att-acctpop-ic.is-closed svg { stroke: var(--sp-dim); } .att-acctpop-bd > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sp-head); } .att-acctpop-ways { display: grid; gap: 8px; width: 100%; } .att-acctpop-ways a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-head); text-decoration: none; text-align: left; } .att-acctpop-ways a:hover { border-color: var(--sp-line2); } .att-acctpop-ways a svg { flex: none; stroke: var(--sp-red); } .att-acctpop-ways span { display: grid; font-size: 11.5px; color: var(--sp-dim); } .att-acctpop-ways b { font-size: 14px; color: var(--sp-head); font-weight: 600; } /* Client accounts: the reason under a heading, the account's facts, its standing history. */ .att-acct-why { margin: 6px 0 0; } .att-acct-dl { display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; margin: 0; font-size: 13.5px; } .att-acct-dl dt { color: var(--sp-dim); } .att-acct-dl dd { margin: 0; color: var(--sp-head); min-width: 0; overflow-wrap: anywhere; } .att-acct-hist { list-style: none; margin: 0; padding: 6px 20px 14px; } .att-acct-hist li { padding: 12px 0; border-bottom: 1px solid var(--sp-line); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--sp-dim); } .att-acct-hist li:last-child { border-bottom: 0; } .att-acct-hist p { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--sp-head); } /* THE PAGER (client, 26 Oct: everything shown, in pages - inc/cm.php atlantic_cm_pager()). The portal's own small buttons; the count in the mono figures the tables use. */ .att-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--sp-line); } .att-pager-n { font-family: var(--att-font-mono, monospace); font-size: 12px; color: var(--sp-dim); } .att-pager-go { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .att-pager-at { font-size: 12.5px; color: var(--sp-dim); font-variant-numeric: tabular-nums; } .att-pager .sp-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; } .att-pager .sp-btn svg { flex: none; } /* On the customer's own page the lists are cards, not one panel: the pager stands alone. */ .att-pager.is-loose { border-top: 0; padding: 14px 2px 0; } /* THE STAFF SIGN-IN, OPENED BY A BROWSER SIGNED IN AS A CUSTOMER (26 Oct, portal/login.php): one amber line above the form saying which account it is and that signing in replaces it. */ .att-signin-as { margin: 18px 26px 0; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--sp-head); background: rgba(217,136,31,.12); border: 1px solid rgba(217,136,31,.34); } /* REQUEST A QUOTE INSIDE THE COMPANY PORTAL (27 Oct, company/request.php): the website's own form in a frame that grows with it, and the "received" line above it. */ .att-co-frame { padding: 0; overflow: hidden; } .att-co-frame iframe { display: block; width: 100%; min-height: 720px; border: 0; background: transparent; } .att-co-sent { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(42,143,99,.45); background: rgba(42,143,99,.12); } .att-co-sent .ic { color: #2A8F63; flex: none; } .att-co-sent .ic svg { stroke: #2A8F63; } .att-co-sent b { display: block; font-size: 14px; color: var(--sp-head); } .att-co-sent p { margin: 2px 0 0; font-size: 13px; color: var(--sp-dim); } .att-co-sent .sp-btn { margin-left: auto; } /* CLOSE MY ACCOUNT (27 Oct, inc/company-closure.php): the request form on the profile page, and the line on the company page in the portal that says the company asked to close. */ .att-close-form { margin-top: 14px; } .att-close-why { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; } .att-close-why legend { padding: 0; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-dim); } .att-close-opt, .att-close-ok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--sp-head); cursor: pointer; } .att-close-opt input[type="radio"], .att-close-ok input[type="checkbox"] { accent-color: var(--sp-red); width: 16px; height: 16px; flex: none; } .att-close-opt input[type="date"] { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-head); } .att-close-ok { align-items: flex-start; line-height: 1.5; } .att-close-ok input { margin-top: 2px; } .att-close-admins { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--sp-head); } .att-close-admins a { color: var(--sp-dim); margin-left: 6px; } .att-co-closing { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(217,136,31,.4); background: rgba(217,136,31,.1); } .att-co-closing .ic { color: var(--sp-warn); flex: none; } .att-co-closing .ic svg { stroke: var(--sp-warn); } .att-co-closing b { display: block; font-size: 14px; color: var(--sp-head); } .att-co-closing p { margin: 2px 0 0; font-size: 12.5px; color: var(--sp-dim); } .att-co-closing .sp-btn { margin-left: auto; } /* ---------------------------------------------------------------- identities (29 Oct 2026) inc/identity.php. Elements the design never drew: the top bar's Customer button, the caller verification screen, the Quotes search row, and the PIN panel on the customer's and company's own pages. They borrow the design's tokens only. */ /* the Customer button: a labelled button among the top bar's icons */ .sp-topr .att-verifybtn{gap:6px;white-space:nowrap} .sp-topr .att-verifybtn.on{border-color:var(--sp-red);color:var(--sp-red)} /* verification: the refusal line, the matched line, the open account's bar */ .att-vf-bad{margin:0 0 14px;padding:12px 16px;border-radius:12px;border:1px solid rgba(225,18,38,.28);background:rgba(225,18,38,.07);color:var(--sp-red);font-size:13.5px;font-weight:600} .att-vf-match{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--sp-head)} .att-vf-match svg{color:#2A8F63;flex:none} .att-vf-code{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .att-vf-code .sp-f{flex:0 1 220px;margin:0} .att-vf-code input{font-size:20px;letter-spacing:6px} .att-vf-step{max-width:820px} .att-vf-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:12px;background:rgba(42,143,99,.10);border:1px solid rgba(42,143,99,.30);color:var(--sp-head);font-size:13.5px} .att-vf-bar svg{color:#2A8F63;flex:none} .att-vf-bar span{flex:1;min-width:200px} .att-vf-bar b{font-variant-numeric:tabular-nums;white-space:nowrap} .att-vf-scope{margin:0 0 14px} /* Quotes: the number / date / account search row */ .att-qfind{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 14px} .att-qfind label{display:grid;gap:4px;font-size:11.5px;color:var(--sp-dim);font-weight:600} .att-qfind input,.att-qfind select{height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--sp-line);background:var(--sp-card,#fff);color:var(--sp-head);font:inherit;font-size:13px} .att-qfind label:first-of-type{flex:1 1 260px} .att-qfind label:first-of-type input{width:100%} @media (max-width:640px){.att-qfind label{flex:1 1 100%}.att-qfind input,.att-qfind select{width:100%}} /* the account's own number, and the PIN panel */ .att-prof-id{font-family:'Spline Sans Mono',ui-monospace,monospace;letter-spacing:.04em} .att-pin{display:grid;gap:12px} .att-pin-row{display:flex;align-items:center;gap:12px} .att-pin-dots{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:22px;font-weight:600;letter-spacing:6px;color:var(--sp-head);min-width:130px} .att-pin-msg{margin:0;font-size:12.5px;color:var(--sp-red)} /* ---------------------------------------------------------------- report preview (29 Oct 2026) inc/report-pdf.php: the PDF shown inside the portal before it is downloaded. */ .att-rpt-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .att-rpt-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:540px;border:1px solid var(--sp-line);border-radius:14px;background:#fff} @media (max-width:640px){.att-rpt-frame{height:70vh;min-height:420px}} /* ---------------------------------------------------------------- the two checks before sending (29 Oct 2026) portal/parts/send-checks.php: inside Send for payment and Bill to company. */ .att-send-checks{display:grid;gap:8px;margin:0 0 12px} .att-send-checks label{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--sp-ink);cursor:pointer} .att-send-checks input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:var(--att-red)} /* Live chat (client, 30 Oct 2026): the alert on every screen and the reply box. */ .pl-livebar{position:fixed;z-index:9999;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 28px);padding:11px 14px 11px 18px;border-radius:14px;background:#B60D1C;color:#fff;font-size:14px;box-shadow:0 18px 44px -14px rgba(0,0,0,.65)} .pl-livebar b{font-weight:800} .pl-livebar span{font-variant-numeric:tabular-nums;opacity:.85} .pl-livebar .pl-conv-btn{--k:#fff;--kd:#f3f3f3;color:#B60D1C;text-decoration:none} .pl-livebar .pl-conv-btn:hover{color:#B60D1C} .pl-live-comp{flex:none;display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)} .pl-live-comp textarea{flex:1;min-width:0;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;font-size:14px} .pl-live-comp textarea:focus{outline:none;border-color:var(--k)} @media (max-width:640px){.pl-livebar{flex-wrap:wrap;top:8px;width:calc(100vw - 16px);box-sizing:border-box}}