/* Blue Sail Clients — client dashboard. Uses the bluesail theme's tokens where present, with its own fallbacks so the plugin still looks right on any theme. */ /* The palette is declared on both: the dialog is moved to at runtime, out of .bsc and therefore out of scope for tokens declared only there — which left it with no background at all and the page showing through it. */ .bsc, .bsc-modal{ --bsc-bg:#05070a; --bsc-panel:#0b0f14; --bsc-panel2:#0e141b; --bsc-blue:#19c8e0; --bsc-aqua:#7fe9f5; --bsc-dark:#03151a; --bsc-line:rgba(25,200,224,.30); --bsc-soft:rgba(25,200,224,.13); --bsc-txt:#e8f4f6; --bsc-dim:#8fa6ac; --bsc-body:#cfdde0; --bsc-ok:#9df29b; --bsc-warn:#ffd479; --bsc-bad:#ff9b9b; } .bsc{ max-width:780px;margin:0 auto;color:var(--bsc-txt);font-size:17px;line-height:1.6; } .bsc *{box-sizing:border-box} .bsc h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin:8px 0 0} .bsc h2{font-size:22px;font-weight:800;margin:0} .bsc h3{font-size:19px;font-weight:700;margin:0 0 6px} .bsc p{margin:0 0 12px} .bsc a{color:var(--bsc-aqua)} .bsc-dim{color:var(--bsc-dim)} /* a blank line typed into the Wording tab becomes a paragraph gap, not two cramped breaks — sits inside an existing

, so it spaces rather than nests */ .bsc-para-gap{display:block;height:14px} .bsc-small{font-size:14px} .bsc-head{margin:0 0 26px} .bsc-kicker{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--bsc-blue);margin-bottom:6px} /* cards */ .bsc-card{position:relative;background:var(--bsc-panel);border:1px solid var(--bsc-line); padding:24px;margin:0 0 16px;overflow:hidden} .bsc-card::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px; background:var(--bsc-aqua);box-shadow:0 0 10px var(--bsc-aqua)} /* Hub — the landing grid. Everything the client can do is a destination here rather than one long scroll, so the width opens up past reading measure for the tiles. */ /* The theme wraps page content at reading width, which is right for the section screens and wrong for a launcher — four tiles across need more room than a paragraph does, so the landing steps outside the container and re-centres. */ .bsc-wide{max-width:none;width:min(1140px,calc(100vw - 32px));position:relative;left:50%; transform:translateX(-50%)} /* 240px against the 1140px cap lands exactly four across, and steps down to three and two on its own as the screen narrows — no breakpoint list to keep in step. */ .bsc-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0 0; grid-auto-rows:1fr} /* one two-line description must not make its whole row taller than the rest */ .bsc-tile{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;gap:12px;padding:30px 20px 26px;background:var(--bsc-panel);border:1px solid var(--bsc-line); overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} .bsc .bsc-tile{color:var(--bsc-txt);text-decoration:none} .bsc .bsc-tile:hover,.bsc .bsc-tile:focus-visible{border-color:var(--bsc-blue);transform:translateY(-2px); box-shadow:0 0 26px rgba(25,200,224,.18);color:var(--bsc-txt)} /* the card family's corner accent, held back until hover so eight of them don't shout */ .bsc-tile::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--bsc-aqua); box-shadow:0 0 10px var(--bsc-aqua);opacity:0;transition:opacity .18s ease} .bsc-tile:hover::before,.bsc-tile:focus-visible::before{opacity:1} .bsc-tile-ico{display:block;line-height:0} .bsc-tile-ico svg{display:block} .bsc-tile-title{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--bsc-aqua)} .bsc-tile-desc{font-size:15px;line-height:1.45;color:var(--bsc-dim)} /* In the flow under the description, not pinned to the corner: this wording is editable, so a corner box collides with the icon the moment anyone writes a badge longer than a word or two — which "Active to 11 Sep 27" promptly did. */ /* pushed to the bottom of the tile, so icons, titles and descriptions line up across a row whether or not a tile has a badge, and every badge sits on one baseline */ .bsc-tile-badge{margin-top:auto;font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px; border-radius:999px;background:var(--bsc-soft);color:var(--bsc-aqua);line-height:1.5} .bsc-tile-badge.warn{color:var(--bsc-warn);background:rgba(255,212,121,.12)} .bsc-tile-badge.ok{color:var(--bsc-ok);background:rgba(157,242,155,.12)} .bsc-tile-badge.bad{color:var(--bsc-bad);background:rgba(255,155,155,.12)} /* a tile that leaves the site says so, rather than surprising them with a new tab */ .bsc-tile.is-external::after{content:"↗";position:absolute;bottom:10px;right:12px; font-size:13px;color:var(--bsc-dim)} .bsc-tile.is-external:hover::after{color:var(--bsc-aqua)} .bsc-hub-alert{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap} /* admin-only, and quiet: Chris needs the route in, the client never sees it */ .bsc-hub-edit{display:flex;gap:16px;justify-content:flex-end;margin:22px 0 -10px} .bsc .bsc-hub-edit a{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--bsc-dim);text-decoration:none; border:1px solid var(--bsc-soft);padding:3px 8px} .bsc .bsc-hub-edit a:hover{color:var(--bsc-aqua);border-color:var(--bsc-line)} .bsc-back{margin:0 0 18px;font-size:14px} .bsc .bsc-back a{color:var(--bsc-dim);text-decoration:none} .bsc .bsc-back a:hover{color:var(--bsc-aqua)} .bsc-section-stub{text-align:center;padding:56px 24px} .bsc-section-stub .bsc-tile-ico{margin:0 0 14px;display:flex;justify-content:center} .bsc-section-stub h2{margin-bottom:8px} /* On a phone a launcher wants to stay a grid — a single column turns eight tiles into the long scroll the grid replaced. */ @media (max-width:560px){ .bsc-hub{grid-template-columns:repeat(2,1fr);gap:12px} .bsc-tile{padding:22px 12px 18px;gap:8px} .bsc-tile-title{font-size:16px} .bsc-tile-desc{font-size:13px} .bsc-tile-ico svg{width:38px;height:38px} /* a dated badge like "Active to 11 Sep 27" wraps in a 166px tile otherwise */ .bsc-tile-badge{font-size:9px;padding:3px 7px;letter-spacing:.05em} } /* plan */ .bsc-plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} .bsc-plan-state{text-align:right;font-size:14px} .bsc-badge{display:inline-flex;align-items:center;justify-content:center; font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--bsc-line); color:var(--bsc-aqua);margin-bottom:4px} /* inside a list row, the status badge matches the button beside it exactly */ /* One width for every trailing column so the rows line up. 124px, not 104px: the longest label in there is "View & pay", which needs 87px of text plus padding — at 104px it spilled straight out of its own border. */ .bsc-list .bsc-badge{margin-bottom:0;height:42px;width:124px;padding:0 14px; line-height:1;box-sizing:border-box} .bsc-badge.ok{color:var(--bsc-ok);border-color:rgba(157,242,155,.45)} .bsc-badge.warn{color:var(--bsc-warn);border-color:rgba(255,212,121,.45)} .bsc-badge.bad{color:var(--bsc-bad);border-color:rgba(255,155,155,.45)} .bsc-includes{list-style:none;margin:16px 0 0;padding:0} .bsc-includes li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--bsc-soft); font-size:16px;color:var(--bsc-body)} .bsc-includes li:first-child{border-top:0} .bsc-includes li::before{content:"";position:absolute;left:3px;top:16px;width:11px;height:6px; border-left:2px solid var(--bsc-blue);border-bottom:2px solid var(--bsc-blue);transform:rotate(-45deg)} .bsc-plan--expired{border-color:rgba(255,155,155,.4)} .bsc-plan--expiring{border-color:rgba(255,212,121,.4)} /* Invoices as a ledger. Ruled rows and right-aligned figures, because money in a column is read by comparing it, and a part payment only makes sense next to the total it is part of. */ .bsc-sheet-wrap{overflow-x:auto;margin:18px -4px 0;padding:0 4px} .bsc-sheet{width:100%;border-collapse:collapse;font-size:15px;min-width:660px} .bsc-sheet th{text-align:left;padding:0 12px 10px 0;font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bsc-dim);font-weight:600; border-bottom:1px solid var(--bsc-line);white-space:nowrap} .bsc-sheet td{padding:13px 12px 13px 0;border-bottom:1px solid var(--bsc-soft);color:var(--bsc-body); white-space:nowrap} .bsc-sheet tr:last-child td{border-bottom:0} .bsc-sheet .num{text-align:right;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:14px; padding-right:20px} .bsc-sheet th.num{padding-right:20px} .bsc-sheet-no{color:var(--bsc-txt);font-weight:700} .bsc-sheet .is-paid{color:var(--bsc-ok)} .bsc-sheet .is-owing{color:var(--bsc-warn)} .bsc-sheet tr.is-void td{opacity:.5} .bsc-sheet tr.is-paid td{color:var(--bsc-dim)} /* the queue sheet: a second line under a cell, and the caveat under the table. The request title is the one cell allowed to wrap — nowrap on a long episode name pushed the delivery date clean off the side of the card. */ .bsc-sheet-what{white-space:normal} .bsc-sheet-what strong{display:block;max-width:420px} .bsc-sheet-due{white-space:nowrap} .bsc-sheet-sub{display:block;margin-top:3px;font-size:12.5px;line-height:1.4} /* images already sent, shown so they can be taken out */ .bsc-thumbs-kept{margin-bottom:6px} .bsc-th-kept{position:relative} .bsc-editing{margin-bottom:18px} .bsc-kb-intro{margin:0 0 14px;font-size:16.5px;color:var(--bsc-txt)} .bsc-kb-body{font-size:15.5px;line-height:1.75;color:var(--bsc-body);max-width:62ch} .bsc-sheet-note{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--bsc-line); background:var(--bsc-soft);font-size:13.5px;line-height:1.6;color:var(--bsc-body)} .bsc-sheet-act{text-align:right;padding-right:0} /* Three fixed slots rather than a flow, so View sits in the same place on every row. With a flex row, a locked job's explanation is wider than the Edit button it stands in for, and View shifted left on that row alone. */ .bsc-rowacts{display:grid;grid-template-columns:minmax(0,1fr) 104px 104px;gap:10px; align-items:center;width:100%} /* grid-row:1 on all three. Naming a column without a row lets auto-placement drop a later item onto a second row rather than back-filling column 1 — which is what put the lock sentence underneath the View button instead of beside it. */ .bsc-lockword{grid-column:1;grid-row:1;text-align:right;font-size:12.5px;line-height:1.4;white-space:normal} .bsc-act-view{grid-column:2;grid-row:1} .bsc-act-edit{grid-column:3;grid-row:1} .bsc-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px;letter-spacing:.12em;text-transform:uppercase} .bsc-pill--ok{background:rgba(157,242,155,.12);color:var(--bsc-ok)} .bsc-pill--warn{background:rgba(255,212,121,.12);color:var(--bsc-warn)} .bsc-pill--bad{background:rgba(255,155,155,.12);color:var(--bsc-bad)} .bsc-pill--off{background:var(--bsc-soft);color:var(--bsc-dim)} .bsc-inv-owed{margin:14px 0 0;color:var(--bsc-warn);font-size:16px} /* The ledger stops being a table wherever it does not comfortably fit. Eight columns need ~741px and the card gives back roughly 80px of page width, so anything under about 820px clips — a sideways-scrolling table cuts the button mid-word with nothing on screen to say it scrolls, which reads as broken rather than swipeable. 900px leaves margin rather than sitting on the exact figure. */ @media (max-width:900px){ .bsc-sheet-wrap{overflow-x:visible;margin:18px 0 0;padding:0} .bsc-sheet{min-width:0;display:block} .bsc-sheet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bsc-sheet tbody,.bsc-sheet tr,.bsc-sheet td{display:block;width:auto} .bsc-sheet tr{border:1px solid var(--bsc-line);padding:14px 16px;margin:0 0 12px} .bsc-sheet tr:last-child{margin-bottom:0} .bsc-sheet td{border-bottom:0;padding:5px 0;display:flex;justify-content:space-between; align-items:baseline;gap:16px;white-space:normal;text-align:right} .bsc-sheet td::before{content:attr(data-l);flex:0 0 auto;text-align:left; font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--bsc-dim)} .bsc-sheet .num{padding-right:0} /* the invoice number leads the block, so it gets no label and full weight */ .bsc-sheet .bsc-sheet-no{display:block;text-align:left;font-size:17px;padding-bottom:10px; margin-bottom:6px;border-bottom:1px solid var(--bsc-soft)} .bsc-sheet .bsc-sheet-no::before{content:none} .bsc-sheet-act{display:block;padding-top:12px} .bsc-sheet-act::before{content:none} .bsc-sheet-act .bsc-btn-sm{display:block;width:100%;text-align:center} } /* plan page */ .bsc-plan-when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px} .bsc-plan-when .bsc-badge{margin-bottom:0} .bsc-plan-h{margin:26px 0 4px;font-size:15px;letter-spacing:.02em;color:var(--bsc-aqua)} /* what the plan does NOT cover, marked so it cannot be mistaken for an inclusion */ .bsc-excludes{list-style:none;margin:10px 0 0;padding:0} .bsc-excludes li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--bsc-soft); font-size:16px;color:var(--bsc-dim)} .bsc-excludes li:first-child{border-top:0} .bsc-excludes li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:1px; background:var(--bsc-dim)} .bsc-plan-quote{margin:14px 0 0} /* the ask */ .bsc-ask{margin:40px 0 38px;text-align:center} .bsc-ask .bsc-btn{margin-bottom:26px} .bsc-rule{font-size:15px;color:var(--bsc-dim);margin:0;line-height:1.75;max-width:560px; margin-left:auto;margin-right:auto} .bsc-rule a{display:inline-block;margin-top:10px} .bsc-rule-big{font-size:19px;font-weight:700;color:var(--bsc-aqua);margin-bottom:20px;line-height:1.5} .bsc-how p{margin-bottom:16px} /* Admin-only inline edit links — visible to Chris, never to the client. Absolutely positioned, NOT floated: a float shrinks any sibling that establishes its own formatting context, which silently squeezed the first row of every list and threw the columns out of line. */ .bsc-edit{position:absolute;top:16px;right:16px;z-index:2; font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--bsc-dim);text-decoration:none; border:1px solid var(--bsc-soft);padding:3px 8px} .bsc-edit:hover{color:var(--bsc-aqua);border-color:var(--bsc-line)} /* buttons */ /* inline-flex with no vertical padding: the label is centred by the box rather than by padding maths, so the same button is the same height wherever it appears — the plan page's Renew came out a pixel taller than the dialog's View invoice on the old rule */ .bsc-btn{display:inline-flex;align-items:center;justify-content:center; background:var(--bsc-blue);color:var(--bsc-dark);border:none; font:inherit;font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase; padding:0 28px;min-height:52px;line-height:1;cursor:pointer;text-decoration:none;border-radius:2px; box-shadow:0 0 22px rgba(25,200,224,.28);transition:.15s} .bsc-btn:hover{background:var(--bsc-aqua);color:var(--bsc-dark)} /* ".bsc a" sets the link colour and outranks ".bsc-btn", so an anchor styled as a primary button came out aqua on aqua — the label all but vanished. Anchors and buttons are the same control and must read the same. */ .bsc a.bsc-btn, .bsc a.bsc-btn:hover, .bsc a.bsc-btn:visited{color:var(--bsc-dark);text-decoration:none} .bsc-btn-lg{font-size:15px;padding:0 34px;min-height:58px} .bsc-back{display:inline-block;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--bsc-dim);margin-bottom:26px;text-decoration:none} /* states */ .bsc-active{border-color:rgba(25,200,224,.55);box-shadow:0 0 30px rgba(25,200,224,.12)} .bsc-needs{border-color:rgba(255,212,121,.5);background:rgba(255,212,121,.05)} .bsc-needs::before{background:var(--bsc-warn);box-shadow:0 0 10px var(--bsc-warn)} .bsc-ready{border-color:rgba(157,242,155,.5);background:rgba(157,242,155,.05)} .bsc-ready::before{background:var(--bsc-ok);box-shadow:0 0 10px var(--bsc-ok)} .bsc-q{background:rgba(255,212,121,.09);border-left:3px solid var(--bsc-warn);padding:12px 16px} .bsc-due{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--bsc-aqua)} /* List rows share one column rhythm across every card, so statuses, dates and actions line up vertically whichever card you are looking at. `.bsc` beats the theme's `.prose ul/li` rules on specificity. */ .bsc .bsc-list{list-style:none;margin:14px 0 0;padding:0} .bsc .bsc-list li{display:flex;align-items:center;gap:12px;padding:14px 0; border-top:1px solid var(--bsc-soft);flex-wrap:nowrap;width:100%} .bsc .bsc-list li:first-child{border-top:0} .bsc-li-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column} .bsc-li-main strong{overflow:hidden;text-overflow:ellipsis} .bsc-li-main .bsc-dim{font-size:14px} /* the three trailing columns — fixed so they cannot drift row to row */ .bsc-list li > .bsc-badge{flex:0 0 124px} .bsc-list li > .bsc-btn-sm, .bsc-list li > .bsc-btn-ghost{flex:0 0 124px} .bsc-list li > .bsc-dim.bsc-small{flex:0 0 124px;text-align:right} .bsc-list li > .bsc-pos{flex:0 0 124px;text-align:center} /* a row with no action still reserves that column, so the status chip stays in the status column instead of sliding to the far right */ .bsc-list li > .bsc-badge:last-child, .bsc-list li > .bsc-pos:last-child{margin-right:136px} .bsc-pos{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--bsc-blue);border:1px solid var(--bsc-line);padding:4px 10px; height:42px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box} @media (max-width:560px){ .bsc .bsc-list li{flex-wrap:wrap} .bsc-list li > .bsc-dim.bsc-small{text-align:left} } .bsc-moves{display:flex;gap:6px} .bsc-moves form{margin:0} .bsc-moves button{width:44px;height:44px;background:var(--bsc-panel2);border:1px solid var(--bsc-line); color:var(--bsc-aqua);font-size:14px;cursor:pointer} .bsc-moves button:disabled{opacity:.25;cursor:not-allowed} .bsc-inline{margin:12px 0 0} /* notices */ .bsc-note{padding:18px 22px;margin:0 0 20px;font-size:16px;border:1px solid var(--bsc-line)} .bsc-note.ok{border-color:rgba(157,242,155,.5);background:rgba(157,242,155,.08);color:#ccf3cb} .bsc-note.warn{border-color:rgba(255,212,121,.5);background:rgba(255,212,121,.08);color:#ffe1a1} /* how it works */ .bsc-how p{font-size:16px;color:var(--bsc-body)} .bsc-emergency{margin-top:18px;padding-top:16px;border-top:1px solid var(--bsc-soft);color:var(--bsc-warn)} /* ---------------- form ---------------- */ .bsc-scope{border:1px solid var(--bsc-line);border-left:3px solid var(--bsc-blue); background:rgba(25,200,224,.06);padding:16px 20px;margin:0 0 26px;font-size:16px;color:var(--bsc-body)} .bsc-step{margin:26px 0 0} .bsc-step-h{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--bsc-blue);margin-bottom:12px} .bsc-step-h span{color:var(--bsc-dim)} /* Side by side, sized so the words stay on one line. Three across a 684px column give boxes of 222px; at 12px padding, an 18px radio and a 9px gap that leaves 172px for the text, and the longest label — "Amend existing products" — measures 164px at 13.5px. It wrapped at 15px, which is what made the row look ragged. */ .bsc-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px} /* .bsc-modes .bsc-mode, not .bsc-mode: these are