/* ========================================================================= StratGeeks Members Hub — application layer ------------------------------------------------------------------------- This sheet sits ON TOP of the website's design-system.css. It adds ONLY the app-shell vocabulary the marketing site does not have (sidebar, channel list, thread view, library browser). Colour, type, radii, spacing rhythm, button language and the readability floors all come from the site tokens — nothing is re-invented here. Everything is scoped under body.sg-hub, the same technique the child theme uses with body.sg-commerce, so Hub styles can never leak into the marketing pages and vice versa. ====================================================================== */ body.sg-hub{ background:var(--d-bg); color:var(--d-text); font-family:"Chivo","Helvetica Neue",Arial,sans-serif; font-size:var(--fs-body); line-height:1.62; margin:0; -webkit-font-smoothing:antialiased; } body.sg-hub *{box-sizing:border-box} body.sg-hub a{color:inherit;text-decoration:none} body.sg-hub img{max-width:100%} /* --------------------------------------------------------------------------- STRATEGY BRAND COLOURS, for the Strategy Dashboard only. The squares beside the channel names (ORS, Echo, Axios, Recon, Prism, Harmony) are emoji, so they cannot be restyled and they are what everyone recognises a strategy by. These are those six colours, sampled from them. WHY THIS IS SCOPED AND NOT A CHANGE TO --p-* GLOBALLY The Hub's design system uses --p-echo as its DEFAULT ACCENT as well as Echo's brand colour — focus rings, badges, card accents and links all resolve to it. Redefining it globally would repaint most of the Hub, which is a separate decision from making the dashboard agree with the sidebar. So the tokens are set on a wrapper the Strategies page puts around the dashboard, and the plugin — which documents that it reads the site's own --p-* tokens — picks them up by inheritance. Nothing else is touched. Prism is here for completeness; the dashboard has no Prism section. --------------------------------------------------------------------------- */ .sg-hub .sgh-strategy-theme{ /* ORS is the house turquoise, NOT the blue of its emoji square. The site's main turquoise is #2FD3F0; this is the deeper teal that has always been ORS in the design system — close enough to read as the same family, different enough to be its own colour. Matching the emoji exactly pulled ORS out of the brand entirely, which is the drift this undoes. */ --p-ors:#17B5B0; --p-echo:#E5743C; --p-axios:#E7B544; --p-recon:#4BBF85; --p-prism:#875DD5; --p-harmony:#DCD2E5; --sgh-dl:#DDE7E9; /* one download colour, every strategy */ --sgh-dl-ink:#06090A; /* The HOUSE teal, used for section labels and anything that belongs to StratGeeks rather than to one product — the guide, the section headings. Same value as --p-ors because it is the site's button colour and ORS happens to wear it too, but it is its own token on purpose: re-colouring ORS one day must not silently repaint every heading on the page. */ --sgh-label:#17B5B0; } /* THE ONE THING THE TEMPLATES THEMSELVES CANNOT SAY. Templates ship with Backtest Mode ticked, so the page carries the warning instead — directly above them, where it is about to matter. It wears its OWN token rather than --p-axios, even though the value is the same amber today: inside .sgh-strategy-theme an Axios-coloured box reads as "this concerns Axios", and this concerns every strategy on the page. */ .sg-hub .sgh-caution{ --sgh-caution:#E7B544; border:1px solid color-mix(in srgb, var(--sgh-caution) 42%, transparent); border-left:3px solid var(--sgh-caution); border-radius:8px; padding:12px 16px; margin:0 0 20px; background:color-mix(in srgb, var(--sgh-caution) 7%, transparent); } .sg-hub .sgh-caution h2{ font-size:var(--fs-micro,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--sgh-caution); margin:0 0 6px; } .sg-hub .sgh-caution p{ margin:0; color:var(--d-dim,#B3C4C8); font-size:13.5px; line-height:1.55; } .sg-hub .sgh-caution strong{color:var(--d-text,#E8F1F2)} /* THE FIT FINDER IS A TOOL, NOT A THIRD WARNING. The plugin ships it as a
with a 1px border in #1E2A2E on a #162125 background — invisible in practice — directly beneath the plugin's amber "Times are Eastern" note, with our amber Backtest note further up. The one thing on the page a member is meant to OPEN was the quietest thing in that strip. So it wears the house teal, and deliberately NOT amber: amber is already doing caution twice here, and a third amber box would have blurred all three. The 3px left edge is the same idiom as .sgh-caution, so the page keeps one vocabulary for "this block is special" and uses colour, not shape, to say which kind. Scoped to our wrapper and written against the plugin's own class, so no plugin file is patched and an update cannot silently revert it. */ .sg-hub .sgh-strategy-theme .sgsd-ff{ --sgh-ff:var(--sgh-label,#17B5B0); border:1px solid color-mix(in srgb, var(--sgh-ff) 42%, transparent); border-left:3px solid var(--sgh-ff); background:color-mix(in srgb, var(--sgh-ff) 6%, #162125); } .sg-hub .sgh-strategy-theme .sgsd-ff .sgsd-ff-title{color:var(--sgh-ff,#17B5B0)} /* The header is the hit area for a
; it was `cursor:auto`, so it did not read as openable at all. */ .sg-hub .sgh-strategy-theme .sgsd-ff > summary, .sg-hub .sgh-strategy-theme .sgsd-ff .sgsd-ff-head{cursor:pointer} /* "COPY MY SUMMARY" IS AN ACTION, SO IT SHOULD LOOK LIKE ONE. It ships as a bare ghost button — transparent, with a #2A3A3F border that is all but invisible on this background — sitting among twenty-nine other ghost buttons (every View and Download in the results). It was the hardest thing in the panel to find and the only one that does something unusual. Targeted by its position rather than its class: it is the one BUTTON that is a direct child of the head, so View and Download are untouched. */ .sg-hub .sgh-strategy-theme .sgsd-ff-head > button.sgsd-btn-ghost{ background:color-mix(in srgb, var(--sgh-ff,#17B5B0) 16%, transparent); border-color:var(--sgh-ff,#17B5B0); color:var(--sgh-ff,#17B5B0); font-weight:700; } .sg-hub .sgh-strategy-theme .sgsd-ff-head > button.sgsd-btn-ghost:hover, .sg-hub .sgh-strategy-theme .sgsd-ff-head > button.sgsd-btn-ghost:focus-visible{ background:color-mix(in srgb, var(--sgh-ff,#17B5B0) 26%, transparent); } /* The line under it, added by dashboard-finder-note.js. Quiet on purpose: the button is the thing to notice, this only says where the text goes. */ .sg-hub .sgh-strategy-theme .sgh-ff-note{ margin:6px 0 0; max-width:var(--measure,62ch); color:var(--d-dim,#B3C4C8); font-size:12.5px; line-height:1.5; } /* EVERY download button is the same pale tone, whatever the strategy. The accent still identifies a strategy on tabs, tags, strips and the dot beside the package — but "download this" is one action and it should look like one action, not six. Only `.sgsd-dl` is touched, so the plugin's other buttons keep their own styling. */ .sg-hub .sgh-strategy-theme .sgsd-dl, .sg-hub .sgh-strategy-theme .sgsd-dl:hover, .sg-hub .sgh-strategy-theme .sgsd-dl:focus{ background:var(--sgh-dl); color:var(--sgh-dl-ink); border-color:transparent; } .sg-hub .sgh-strategy-theme .sgsd-dl:hover{filter:brightness(1.06)} /* ---- Strategy packages: the Hub's own row above the dashboard ---------- */ .sg-hub .sgh-packages{ border:1px solid var(--d-line,#2A3A3F); border-radius:12px; padding:18px 18px 10px; margin:0 0 26px; background:var(--d-panel,#111A1D); } /* Step one gets a little more weight than the lists that follow it. */ .sg-hub .sgh-guide{border-color:var(--sgh-dl); margin-bottom:18px} /* The guide is StratGeeks', not a strategy's, so its marker is the house teal. Scoped through .sgh-guide so it beats the generic .sgh-pk-dot rule below, which is defined later and would otherwise win on source order — that is how the guide ended up with Echo's orange dot. */ .sg-hub .sgh-guide .sgh-pk-dot{background:var(--sgh-label,#17B5B0); border-radius:2px} /* SECTION LABELS WEAR THE HOUSE TEAL, NOT A PRODUCT'S COLOUR. They were var(--p-echo) — the Hub's generic accent everywhere else, but ECHO's orange inside this wrapper, so the headings read as Echo's. They need to catch the eye, so neutral grey was too quiet; the house teal is the site's own button colour and belongs to StratGeeks, not to a strategy. */ .sg-hub .sgh-pk-head h2{ font-size:var(--fs-micro,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--sgh-label,#17B5B0); margin:0 0 8px; } .sg-hub .sgh-pk-head p{margin:0 0 14px; color:var(--d-dim,#B3C4C8); font-size:13.5px; line-height:1.55} .sg-hub .sgh-pk-list{list-style:none; margin:0; padding:0} .sg-hub .sgh-pk{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 0; border-top:1px solid var(--d-line,#2A3A3F); } .sg-hub .sgh-pk-dot{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; background:var(--sgh-pk-accent,var(--p-echo)); } .sg-hub .sgh-pk[data-strategy="AXIOS"] {--sgh-pk-accent:var(--p-axios)} .sg-hub .sgh-pk[data-strategy="ECHO"] {--sgh-pk-accent:var(--p-echo)} .sg-hub .sgh-pk[data-strategy="ORS"] {--sgh-pk-accent:var(--p-ors)} .sg-hub .sgh-pk[data-strategy="RECON"] {--sgh-pk-accent:var(--p-recon)} .sg-hub .sgh-pk[data-strategy="HARMONY"]{--sgh-pk-accent:var(--p-harmony)} .sg-hub .sgh-pk[data-strategy="PRISM"] {--sgh-pk-accent:var(--p-prism)} .sg-hub .sgh-pk-main{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 230px} .sg-hub .sgh-pk-name{font-weight:700; letter-spacing:.04em} .sg-hub .sgh-pk-file{font-size:12px; color:var(--d-dim,#B3C4C8); overflow-wrap:anywhere} .sg-hub .sgh-pk-meta{font-size:12px; color:var(--d-dim,#B3C4C8); white-space:nowrap} /* The explanatory line under the licence package: no dot, no button, and it lines up under the name rather than hanging off the left margin. */ .sg-hub .sgh-pk-note{border-top:0; padding-top:0; padding-left:23px} .sg-hub .sgh-pk-note .sgh-pk-file{ color:var(--d-dim,#B3C4C8); font-size:12.5px; line-height:1.55; max-width:78ch; } /* A staff-only item says so, on the item itself. */ .sg-hub .sgh-pk-name .sgh-pk-tag{ margin-left:8px; border-color:var(--s-warn,#E0AC57); color:var(--s-warn,#E0AC57); } /* A package uploaded in the last week (2026-10-19): the same small tag the dashboard puts on a strategy tab after a release, in the strategy's colour. */ .sg-hub .sgh-pk-new{ display:inline-block; margin-left:8px; vertical-align:2px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.5; padding:1px 7px; border-radius:999px; color:var(--sgh-pk-accent,var(--p-echo)); border:1px solid color-mix(in srgb, var(--sgh-pk-accent,var(--p-echo)) 55%, transparent); background:color-mix(in srgb, var(--sgh-pk-accent,var(--p-echo)) 14%, transparent); } .sg-hub .sgh-pk-dl{ background:var(--sgh-dl); color:var(--sgh-dl-ink); text-decoration:none; font-weight:700; font-size:13px; border-radius:8px; padding:9px 15px; flex:0 0 auto; } .sg-hub .sgh-pk-dl:hover{filter:brightness(1.06)} /* Each strategy's own guide, beside its package (2026-10-17). An outline in the house teal, so it reads as the companion to the pale Download package rather than a second competing action. */ .sg-hub .sgh-pk-guide{ color:var(--sgh-label,#17B5B0); text-decoration:none; font-weight:700; font-size:13px; border:1px solid var(--sgh-label,#17B5B0); border-radius:8px; padding:8px 14px; flex:0 0 auto; background:color-mix(in srgb, var(--sgh-label,#17B5B0) 8%, transparent); } .sg-hub .sgh-pk-guide:hover, .sg-hub .sgh-pk-guide:focus-visible{background:color-mix(in srgb, var(--sgh-label,#17B5B0) 16%, transparent)} /* --------------------------------------------------------------------------- The dashboard needs more room than a reading column. .col is 820px because that is a comfortable measure for TEXT. This page is mostly tables and cards, and the account comparison is 2360px of content at its natural width — at 820 it was a letterbox with a scrollbar. --------------------------------------------------------------------------- */ .sg-hub .col.dash{max-width:1340px} /* THE SIZE LADDER'S WAY IN, IN THE SPACE BESIDE THE TITLE. The ladder is ~2000px tall, so the header carries a card that opens it on its own page rather than the tool itself. On a narrow screen it drops under the lead, full width. It wears the LADDER'S OWN orange (#E9773E, its --accent: the "Member tools" label and the Today's size box), outlined all round. In house teal it sat too quietly in the header (Jake, 2026-10-16), and the orange ties the card to the tool it opens. It is its own token, NOT --p-echo: Echo's orange is #E5743C and recolouring Echo must never repaint this, nor this read as "Echo". It also stays clear of the amber that means caution here. */ .sg-hub .sgh-dash-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 32px; margin:0 0 18px; } .sg-hub .sgh-dash-title{flex:1 1 440px; min-width:0} .sg-hub .sgh-dash-title .lead{margin-bottom:0} .sg-hub .sgh-tool{ --sgh-tool:#E9773E; display:flex; flex-direction:column; gap:6px; flex:0 1 320px; min-width:240px; padding:15px 20px; border-radius:10px; text-decoration:none; color:inherit; border:2px solid var(--sgh-tool); background:color-mix(in srgb, var(--sgh-tool) 12%, var(--d-panel,#111A1D)); box-shadow:0 0 0 4px color-mix(in srgb, var(--sgh-tool) 14%, transparent); } .sg-hub .sgh-tool:hover{background:color-mix(in srgb, var(--sgh-tool) 20%, var(--d-panel,#111A1D))} .sg-hub .sgh-tool:focus-visible{outline:2px solid var(--sgh-tool); outline-offset:4px} .sg-hub .sgh-tool-name{ display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sgh-tool); } .sg-hub .sgh-tool-line{font-size:14.5px; color:var(--d-text,#E8F1F2)} @media (max-width:700px){ .sg-hub .sgh-tool{flex-basis:100%} } /* "SCALE THIS SELECTION" (plugin 2.4.13) IS THE WAY INTO THE LADDER FROM A SET. The plugin ships it as a ghost button beside "Clear selection", grey on dark, in a row members scroll past; Jake could not find it (2026-10-16). It wears the ladder's orange (--sgh-tool, as on the header card), solid, so the button and the tool it opens read as one thing. Targeted by the plugin's own class and scoped to our wrapper: no plugin file is patched, Clear selection keeps its ghost style, and /results is untouched. */ .sg-hub .sgh-strategy-theme .sgsd-scale-sel{ --sgh-tool:#E9773E; background:var(--sgh-tool); border-color:var(--sgh-tool); color:#140A04; font-weight:800; font-size:14px; padding:8px 16px; box-shadow:0 0 0 3px color-mix(in srgb, var(--sgh-tool) 22%, transparent); } .sg-hub .sgh-strategy-theme .sgsd-scale-sel:hover, .sg-hub .sgh-strategy-theme .sgsd-scale-sel:focus-visible{filter:brightness(1.08)} /* The directions on the ladder page, in the same orange as the button they point at. */ .sg-hub .sgh-scale-how{ --sgh-tool:#E9773E; border:1px solid color-mix(in srgb, var(--sgh-tool) 45%, transparent); border-left:3px solid var(--sgh-tool); border-radius:10px; background:color-mix(in srgb, var(--sgh-tool) 7%, var(--d-panel,#111A1D)); padding:14px 18px; margin:0 0 18px; } .sg-hub .sgh-scale-how h2{ font-size:var(--fs-micro,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--sgh-tool); margin:0 0 8px; } .sg-hub .sgh-scale-how ol{margin:0 0 8px; padding-left:20px; color:var(--d-text,#E8F1F2); font-size:14px; line-height:1.6} .sg-hub .sgh-scale-how p{margin:0; color:var(--d-dim,#B3C4C8); font-size:13px; line-height:1.55} .sg-hub .sgh-scale-how a{color:var(--sgh-tool)} /* The ladder's own page. The iframe is the plugin's and sizes itself. */ .sg-hub .sgh-back{margin:10px 0 0; font-size:13.5px} .sg-hub .sgh-back a{color:var(--d-mid); text-decoration:none} .sg-hub .sgh-back a:hover{color:var(--d-text,#E8F1F2); text-decoration:underline} .sg-hub .sgh-ladder .sgsd-ladder iframe{margin-top:0 !important} /* THE SELECTION BAR SITS WITH THE NUMBERS IT CONTROLS. 7 / 30 / 90 / All decides what every figure below means, but it was at the very top of the results, five blocks above NET PROFIT, so people changed the period without seeing anything move. The bar (chips AND the period control together) drops to just above the KPIs. Everything keeps its relative order: the blocks that were above the KPIs are pinned ahead of the bar, the bar follows them, and the KPIs and all that comes after — including the account comparison, which stays at the bottom where it belongs — share the last band and so keep DOM order. This leans on the flex column the PLUGIN already sets on .sgsd-results; we deliberately do not set it ourselves. If the plugin ever stops using flex there, these orders quietly stop applying and the page returns to its natural order, which is a safe way to fail. */ .sg-hub .sgh-strategy-theme .sgsd-results > *{order:3} .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-period-note, .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-share, .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-pills, .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-period, .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-source-box{order:1} .sg-hub .sgh-strategy-theme .sgsd-results > .sgsd-selbar{order:2} /* THE REST OF THE SECTION ORDER IS THE PLUGIN'S AND STAYS THE PLUGIN'S. rc.39 reordered .sgsd-results to lift the account comparison near the top. That was a misreading: the complaint was that the SCROLLBAR sat at the bottom of a very tall table, not that the section did. The dashboard reads in the order it was designed to read in, and the Hub does not rearrange it. THE SCROLLBAR GOES AT THE TOP OF THE ACCOUNT TABLE. The table is ~2360px wide and far taller than the screen, so a normal bottom scrollbar sits below everything: you have to scroll past the whole table to find the control that scrolls the table. Flipping the scroll container on its X axis and flipping the table back inside it puts the bar at the top edge, next to the header, where it is reachable immediately. Safe here because the wrapper holds nothing but the table and the table uses no position:sticky, which a transform would otherwise break. */ .sg-hub .sgh-strategy-theme .sgsd-fit .sgsd-table-wrap{ transform:rotateX(180deg); scrollbar-width:auto; } .sg-hub .sgh-strategy-theme .sgsd-fit .sgsd-table-wrap > table{transform:rotateX(180deg)} /* CONTRACTS USED: green for longs, red for shorts, so the section says what it is at a glance. Uses the Hub's own state tokens rather than raw red and green — the same colours a gain and a loss are shown in everywhere else. FRAGILE BY NECESSITY: the plugin renders the two sides as bare .sgsd-side elements with no modifier, so the only thing distinguishing them is that long comes first. If it ever emits short first, or one side alone, these colours would lie. Worth asking for data-side="long|short" on those elements, after which this becomes an attribute match and is safe. */ .sg-hub .sgh-strategy-theme .sgsd-sides > .sgsd-side:nth-child(1) .sgsd-side-title{ color:var(--s-up,#3FC787); } .sg-hub .sgh-strategy-theme .sgsd-sides > .sgsd-side:nth-child(2) .sgsd-side-title{ color:var(--s-down,#D9695C); } .sg-hub .sgh-strategy-theme .sgsd-sides > .sgsd-side:nth-child(1) .sgsd-pos{ border-left:3px solid var(--s-up,#3FC787); } .sg-hub .sgh-strategy-theme .sgsd-sides > .sgsd-side:nth-child(2) .sgsd-pos{ border-left:3px solid var(--s-down,#D9695C); } /* THE ACCOUNT TABLE'S COLUMNS ARE THE PLUGIN'S TO CHOOSE (rc.88). This used to hide every column but the account and the is-on one, from when the plugin always drew a column for every template. The plugin now shows only the viewer's set by default and adds the rest only when "Compare all templates" is pressed, so the hiding rule left that button doing nothing visible (Jake 2026-10-21: 66 columns built, 65 hidden). Nothing is hidden here any more; the top scrollbar above handles the wide compare view. */ /* The page is now titled "Strategy Dashboard", and the plugin prints the same words again as its own heading immediately below. One of them has to go; the Hub's own

is the one that belongs to the page, so the plugin's is hidden HERE ONLY. The line under it — "Updated every Saturday · weekly results through…" — is kept, because that is information, not a title. The public /results page is untouched and keeps its heading, which it needs: nothing else on that page says what it is. */ .sg-hub .sgh-strategy-theme .sgsd-head .sgsd-title{display:none} /* THE HIGHLIGHTED COLUMN IS THE HOUSE TEAL, NOT THE STRATEGY'S COLOUR. "Your combination" and BEST FIT describe the VIEWER'S selection, not a product, so they should not wear whichever strategy happens to be open — they were Echo's orange on Echo, Axios's amber on Axios. Done by retinting --sgsd-accent on the column itself rather than recolouring each piece: the plugin draws the title, the cell borders, the 7% column tint and the badge from that one variable, so overriding it keeps them in agreement. Setting just the text would have left orange edges behind. */ .sg-hub .sgh-strategy-theme .sgsd-fit-table th.is-on, .sg-hub .sgh-strategy-theme .sgsd-fit-table td.is-on{ --sgsd-accent:var(--sgh-label,#17B5B0); } /* THE PERIOD CONTROL: ALWAYS THE SAME PLACE, AND BIG ENOUGH TO FIND. 7 / 30 / 90 / All decides what every number on the page means, and it was small, quiet, and in a position that MOVED: the selection bar wraps, so with Harmony's two chips it stayed on one line and the control sat far right, while Echo's four chips wrapped it onto its own line at the left. Same control, two places, decided by how many templates happen to be ticked. So the bar is stacked unconditionally. The control is then always directly under the chips, always left, whatever is selected. */ .sg-hub .sgh-strategy-theme .sgsd-selbar{ flex-direction:column; align-items:flex-start; } .sg-hub .sgh-strategy-theme .sgsd-seg{align-self:flex-start} .sg-hub .sgh-strategy-theme .sgsd-seg button{ font-size:15px; padding:11px 18px; font-weight:700; } /* COMPARE AND DOWNLOAD MUST NOT LOOK ALIKE, OR SIT APART. Adding a solid Download button next to a faint ghost Compare button, with a wide gap between them, made it easy to hit the wrong one — a misclick downloads eight files instead of ticking them. So: the pair is pushed to the right TOGETHER (the head is left-aligned and Compare takes the auto margin, so Download follows it), and Compare is restyled as an OUTLINE in the house teal against Download's solid pale. Different shape, different colour, same place — one says "show me", the other says "give me". Scoped to the set headers, so "View alone" on the cards is untouched. */ .sg-hub .sgh-strategy-theme .sgsd-kind-head{justify-content:flex-start} /* The pair travels as one flex item, so a wrapping header can never put Download on a different line from Compare. */ .sg-hub .sgh-strategy-theme .sgh-setpair{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; /* Never let the header squeeze the pair: squeezed, the labels wrapped to three lines and two, so the two buttons ended up different heights and visibly out of line with each other. */ flex:0 0 auto; } .sg-hub .sgh-strategy-theme .sgh-setpair > button, .sg-hub .sgh-strategy-theme .sgh-dlall{white-space:nowrap} .sg-hub .sgh-strategy-theme .sgh-setpair > .sgsd-btn-ghost:not(.sgh-dlset), .sg-hub .sgh-strategy-theme .sgsd-style-head .sgsd-btn-ghost:not(.sgh-dlset){ background:transparent; color:var(--sgh-label,#17B5B0); border:1px solid var(--sgh-label,#17B5B0); font-weight:700; } .sg-hub .sgh-strategy-theme .sgh-setpair > .sgsd-btn-ghost:not(.sgh-dlset):hover, .sg-hub .sgh-strategy-theme .sgsd-style-head .sgsd-btn-ghost:not(.sgh-dlset):hover{ background:color-mix(in srgb, var(--sgh-label,#17B5B0) 14%, transparent); } /* The Hub's own download buttons on the dashboard: the same pale tone as every other download, so "take these files" always looks the same. */ .sg-hub .sgh-strategy-theme .sgh-dlset{ background:var(--sgh-dl); color:var(--sgh-dl-ink); border-color:transparent; font-weight:700; } .sg-hub .sgh-strategy-theme .sgh-dlset:hover{filter:brightness(1.06)} .sg-hub .sgh-strategy-theme .sgh-dlset[disabled]{opacity:.45; cursor:default} .sg-hub .sgh-strategy-theme .sgh-dlall{margin:0 0 14px; display:inline-block} /* EVERY "Compare the set" BUTTON SITS ON THE RIGHT. The Eval pass / PA payout heads are row flex, so their button is pushed to the right edge. The long-run head is COLUMN flex, so its button sat in a full-width row of its own and fell to the left — same control, two positions, for a reason that is purely structural. */ .sg-hub .sgh-strategy-theme .sgsd-style-head .sgsd-getrow{justify-content:flex-end} /* And make it look grabbable rather than a hairline. */ .sg-hub .sgh-strategy-theme .sgsd-fit .sgsd-table-wrap::-webkit-scrollbar{height:13px} .sg-hub .sgh-strategy-theme .sgsd-fit .sgsd-table-wrap::-webkit-scrollbar-track{ background:var(--d-line,#2A3A3F); border-radius:999px; } .sg-hub .sgh-strategy-theme .sgsd-fit .sgsd-table-wrap::-webkit-scrollbar-thumb{ background:var(--sgh-dl); border-radius:999px; } @media (max-width:520px){ .sg-hub .sgh-pk-meta{width:100%} .sg-hub .sgh-pk-dl{width:100%; text-align:center} .sg-hub .sgh-pk-guide{width:100%; text-align:center} } body.sg-hub :focus-visible{outline:2px solid var(--p-echo);outline-offset:3px;border-radius:4px} body.sg-hub code{font-family:"IBM Plex Mono",monospace;font-size:.92em;background:var(--d-raise); padding:1px 5px;border-radius:4px;border:1px solid var(--d-line)} .sg-hub .mono{font-family:"IBM Plex Mono",monospace} .sg-hub .men{color:var(--p-echo);font-weight:700} /* ---------- prototype banner (honest about what this is) ---------- */ .sg-hub .protobar{ background:#1B1405;border-bottom:1px solid #3A2E10;color:#E0AC57; font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em; text-transform:uppercase;padding:8px 18px;text-align:center; position:sticky;top:0;z-index:80; } .sg-hub .protobar b{color:#F2C97A;font-weight:700} /* ========================================================================= APP SHELL ====================================================================== */ .sg-hub .app{ display:grid; grid-template-columns:1fr; min-height:100vh; } @media(min-width:1000px){ .sg-hub .app{grid-template-columns:272px minmax(0,1fr)} } /* ---------- sidebar ---------- */ .sg-hub .side{ background:var(--d-surface); border-right:1px solid var(--d-line); display:none; flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto; } @media(min-width:1000px){.sg-hub .side{display:flex}} .sg-hub .side.open{display:flex;position:fixed;inset:0 auto 0 0;width:min(88vw,300px);z-index:70; box-shadow:0 0 0 100vmax rgba(0,0,0,.6)} .sg-hub .brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px; border-bottom:1px solid var(--d-line);min-height:64px} .sg-hub .brand img{height:26px;display:block} .sg-hub .brand .tag{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.14em;text-transform:uppercase;color:var(--p-echo);white-space:nowrap} .sg-hub .sidesec{padding:12px 10px 4px} .sg-hub .sidesec + .sidesec{border-top:1px solid var(--d-line)} .sg-hub .grouphd{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--d-muted);padding:14px 12px 7px;display:block; } .sg-hub .chan{ display:flex;align-items:center;gap:9px;min-height:var(--tap);padding:0 12px; border-radius:6px;color:var(--d-mid);font-size:15px;font-weight:600;letter-spacing:-.004em; } .sg-hub .chan:hover{background:rgba(255,255,255,.04);color:var(--d-text)} .sg-hub .chan[aria-current="page"]{background:var(--d-raise);color:var(--d-text)} .sg-hub .chan[aria-current="page"] .ci{opacity:1} .sg-hub .chan .ci{flex:0 0 auto;width:20px;text-align:center;font-size:15px;opacity:.9} .sg-hub .chan .cn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .chan.unread .cn{color:var(--d-text);font-weight:700} .sg-hub .badge{ flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1; background:var(--p-echo);color:#04191E;border-radius:999px;padding:4px 7px;font-weight:700; } .sg-hub .badge.quiet{background:var(--d-line-2);color:var(--d-text)} .sg-hub .sidefoot{margin-top:auto;border-top:1px solid var(--d-line);padding:12px} .sg-hub .whoami{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px} .sg-hub .whoami .nm{font-size:14.5px;font-weight:700;line-height:1.2} .sg-hub .whoami .rl{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)} /* ---------- top bar ---------- */ .sg-hub .top{ position:sticky;top:0;z-index:50; background:rgba(6,9,10,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--d-line); display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:60px; } @media(min-width:1000px){.sg-hub .top{padding:10px 26px}} .sg-hub .burger{ display:inline-flex;align-items:center;justify-content:center; width:var(--tap);height:var(--tap);background:transparent;border:1px solid var(--d-line-2); border-radius:6px;color:var(--d-text);cursor:pointer;padding:0;flex:0 0 auto; } @media(min-width:1000px){.sg-hub .burger{display:none}} .sg-hub .burger svg{width:20px;height:20px} .sg-hub .crumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto} .sg-hub .crumb .ic{font-size:17px;flex:0 0 auto} .sg-hub .crumb .t{font-size:16.5px;font-weight:700;letter-spacing:-.012em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .crumb .sub{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); color:var(--d-muted);letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto} @media(max-width:640px){.sg-hub .crumb .sub{display:none}} .sg-hub .topsearch{flex:0 1 320px;display:none} @media(min-width:860px){.sg-hub .topsearch{display:block}} .sg-hub .topsearch input{ width:100%;min-height:var(--tap);background:var(--d-card);border:1px solid var(--d-line); border-radius:6px;color:var(--d-text);padding:0 12px 0 34px;font-size:14.5px; font-family:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CA0A5' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:9px center;background-size:17px; } .sg-hub .topsearch input::placeholder{color:var(--d-muted)} .sg-hub .topsearch input:focus{border-color:var(--d-line-2);outline:none} .sg-hub .topacts{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto} .sg-hub .iconbtn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:var(--tap);height:var(--tap);border-radius:6px;color:var(--d-mid); border:1px solid transparent;background:transparent;cursor:pointer; } .sg-hub .iconbtn:hover{background:rgba(255,255,255,.04);color:var(--d-text)} .sg-hub .iconbtn svg{width:19px;height:19px} .sg-hub .iconbtn .dot{ position:absolute;top:7px;right:7px;min-width:16px;height:16px;border-radius:999px; background:var(--p-echo);color:#04191E;font-family:"IBM Plex Mono",monospace; font-size:10px;font-weight:700;line-height:16px;text-align:center;padding:0 3px; } /* ---------- main column ---------- */ .sg-hub .main{min-width:0;display:flex;flex-direction:column} .sg-hub .canvas{padding:20px 16px 64px} @media(min-width:1000px){.sg-hub .canvas{padding:26px 26px 80px}} .sg-hub .col{max-width:820px;margin:0 auto} .sg-hub .col.wide{max-width:1180px} .sg-hub .withrail{display:grid;grid-template-columns:1fr;gap:22px;max-width:1180px;margin:0 auto} @media(min-width:1180px){.sg-hub .withrail{grid-template-columns:minmax(0,1fr) 300px}} .sg-hub .rail{display:flex;flex-direction:column;gap:16px} /* ========================================================================= SHARED PIECES ====================================================================== */ .sg-hub .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--p-echo);margin:0 0 10px} .sg-hub h1.ph{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.026em; line-height:1.12;margin:0 0 8px;text-wrap:balance} .sg-hub h2.sh{font-size:19px;font-weight:700;letter-spacing:-.016em;margin:0 0 12px} .sg-hub .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--d-mid);max-width:var(--measure);margin:0 0 20px} .sg-hub .muted{color:var(--d-muted)} .sg-hub .sep{height:1px;background:var(--d-line);margin:26px 0} .sg-hub .card{ background:var(--d-card);border:1px solid var(--d-line);border-radius:11px; padding:18px 18px 16px;position:relative;overflow:hidden; } .sg-hub .card.acc::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--acc,var(--p-echo))} .sg-hub .btn{ font-family:"Chivo",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.004em; min-height:var(--tap);padding:0 18px;border-radius:6px;border:1px solid transparent;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s ease; } .sg-hub .btn-primary{background:var(--p-echo);color:#04191E;border-color:var(--p-echo)} .sg-hub .btn-primary:hover{filter:brightness(1.08)} .sg-hub .btn-ghost{background:transparent;color:var(--d-text);border-color:var(--d-line-2)} .sg-hub .btn-ghost:hover{border-color:var(--d-mid);background:rgba(255,255,255,.04)} .sg-hub .btn-quiet{background:transparent;color:var(--d-mid);border-color:transparent;padding:0 10px} .sg-hub .btn-quiet:hover{color:var(--d-text)} .sg-hub .btn-sm{min-height:34px;font-size:13.5px;padding:0 12px;border-radius:5px} .sg-hub .pill{ display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace; font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--d-line-2);color:var(--d-muted);border-radius:5px;padding:3px 8px; } .sg-hub .pill.staff{color:var(--sg-green);border-color:rgba(70,204,51,.42)} .sg-hub .pill.member{color:var(--p-echo);border-color:rgba(47,211,240,.35)} .sg-hub .pill.draft{color:var(--s-warn);border-color:rgba(224,172,87,.42)} .sg-hub .pill.live{color:var(--s-up);border-color:rgba(63,199,135,.4)} .sg-hub .pill.warn{color:var(--s-down);border-color:rgba(217,105,92,.45)} .sg-hub .avatar{ flex:0 0 auto;width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.02em; color:#04191E;background:hsl(var(--hue,190) 62% 62%); } .sg-hub .avatar.lg{width:52px;height:52px;font-size:16px} .sg-hub .avatar.sm{width:26px;height:26px;font-size:10px} /* ========================================================================= POSTS AND THREADS ====================================================================== */ .sg-hub .composer{ background:var(--d-card);border:1px solid var(--d-line);border-radius:11px; padding:14px;margin-bottom:18px;display:flex;gap:12px; } .sg-hub .composer textarea{ width:100%;min-height:76px;resize:vertical;background:transparent;border:0;outline:none; color:var(--d-text);font-family:inherit;font-size:15.5px;line-height:1.6;padding:6px 0; } .sg-hub .composer textarea::placeholder{color:var(--d-muted)} .sg-hub .composer .cbody{flex:1 1 auto;min-width:0} .sg-hub .composer .crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap; border-top:1px solid var(--d-line);padding-top:10px;margin-top:6px} .sg-hub .composer .hint{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)} .sg-hub .composer .grow{margin-left:auto} /* ------------------------------------------------------------------------- BULK PREPARATION PANEL — scan, review, prepare ---------------------------------------------------------------------- */ .sg-hub .bulkpanel{ border:1px solid var(--d-line-2);border-radius:10px;background:var(--d-raise); padding:16px 18px;margin:16px 0 6px; } .sg-hub .bulkhd{ font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;color:var(--d-text); } .sg-hub .bulkbar{ height:6px;border-radius:999px;background:var(--d-line);overflow:hidden;max-width:var(--measure); } .sg-hub .bulkbar span{display:block;height:100%;background:var(--p-echo);transition:width .2s ease} .sg-hub .warnword{color:var(--s-warn,#e0a33a)} /* ------------------------------------------------------------------------- PROFILE FORM — display name and the twelve avatar colours ---------------------------------------------------------------------- */ .sg-hub .profileform .fld{display:block;max-width:var(--measure)} .sg-hub .profileform .lbl{ display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);margin-bottom:6px; } .sg-hub .profileform .hint{display:block;margin-top:6px;font-size:13px;color:var(--d-mid);line-height:1.5} .sg-hub .hues{display:flex;flex-wrap:wrap;gap:10px} /* the radio itself is hidden from sight but not from the keyboard or a screen reader — the swatch is its label, and focus lands on it visibly */ .sg-hub .hueopt{position:relative;display:inline-flex;cursor:pointer;border-radius:999px} .sg-hub .hueopt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .sg-hub .hueopt .avatar{border:2px solid transparent;transition:.14s ease} .sg-hub .hueopt input:checked + .avatar{border-color:var(--d-text)} .sg-hub .hueopt input:focus-visible + .avatar{outline:2px solid var(--p-echo);outline-offset:2px} .sg-hub .hueopt:hover .avatar{border-color:var(--d-line-2)} .sg-hub .sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ------------------------------------------------------------------------- STICKY CHANNEL COMPOSER The composer sits below the conversation, which is the right reading order and put it eleven thousand pixels down a busy channel. Sticky keeps it on screen without moving it in the document: the markup, the tab order and the form are all unchanged, and a screen reader still meets it after the posts. Collapsed until you use it. A 275px box pinned to the bottom of a phone is most of the screen, so the toolbar and the upload note stay out of the way and the writing area is two lines — until :focus-within, which is the moment somebody is actually writing. No JavaScript involved; click away and it settles back by itself. ---------------------------------------------------------------------- */ .sg-hub .stickbar{ position:sticky;bottom:0;z-index:40; margin-top:18px;padding-top:12px; /* posts scroll UNDER this, so it needs its own ground to sit on */ background:linear-gradient(to bottom,transparent 0,var(--d-bg) 12px); } .sg-hub .stickbar .composer{margin-bottom:0} .sg-hub .stickbar .composer .tbar{display:none} .sg-hub .stickbar .composer .editor{min-height:0;max-height:4.6em} .sg-hub .stickbar .composer .cbody > p.hint{display:none} .sg-hub .stickbar:focus-within .composer .tbar{display:flex} /* vh, not px: the expanded editor must never be taller than the screen it is pinned to, or the Post button goes off the bottom with no way back. */ .sg-hub .stickbar:focus-within .composer .editor{min-height:88px;max-height:38vh} .sg-hub .stickbar:focus-within .composer .cbody > p.hint{display:block} /* Room to scroll the last post clear of the composer. */ .sg-hub .chatcol{padding-bottom:14px} @media(max-width:999px){ /* clear the fixed mobile bar (56px + its border) rather than sitting under it */ .sg-hub .stickbar{bottom:57px} /* the avatar is decoration; on a phone the writing area needs the width */ .sg-hub .stickbar .composer > .avatar{display:none} .sg-hub .stickbar .composer{padding:10px 12px} .sg-hub .stickbar:focus-within .composer .editor{max-height:30vh} /* "Drag files in · ⌘/Ctrl + Enter to send" describes a keyboard and a mouse. It wrapped to three lines on a phone to say nothing a thumb can use. span only — the announcement checkbox beside it is a label.hint and staff need it. */ .sg-hub .stickbar .composer .crow > span.hint{display:none} } /* ------------------------------------------------------------------------- TOMBSTONE — what is left where something was removed Quiet and unmistakably not content: no card, no body type, muted. It has to read as an absence rather than as a message, or people will think the Hub is telling them something. ---------------------------------------------------------------------- */ .sg-hub .tomb{ display:flex;align-items:center;gap:8px;margin:2px 0 0; font-family:"IBM Plex Mono",monospace;font-size:13px; color:var(--d-muted);font-style:normal; } .sg-hub .tomb.sm{font-size:12.5px} .sg-hub .tomb .tombi{font-size:14px;opacity:.75} .sg-hub .tomb .when{font-size:inherit;color:inherit;opacity:.8} /* ------------------------------------------------------------------------- "NEW POSTS" INDICATOR It must be impossible to miss and impossible to be a nuisance. So it sits OUTSIDE the conversation's flow in both anchorings — absolutely positioned above the sticky composer, or fixed to the viewport where there is none — and appearing therefore cannot move a single post under a reader. Hidden at zero via the `hidden` attribute, so a channel with nothing new renders exactly as it did before. ---------------------------------------------------------------------- */ .sg-hub .newpill{ position:absolute;left:50%;transform:translateX(-50%); bottom:100%;margin-bottom:8px;z-index:45; display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:7px 14px;border-radius:999px;cursor:pointer; border:1px solid var(--acc,var(--d-line-2)); background:var(--d-raise);color:var(--d-text); font-family:"Chivo",sans-serif;font-size:13.5px;font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.35); transition:.14s ease; } .sg-hub .newpill:hover{background:var(--d-card);border-color:var(--acc,var(--d-mid))} .sg-hub .newpill .npi{font-size:15px;line-height:1} .sg-hub .newpill[hidden]{display:none} /* A read-only channel has no sticky bar to hang from, so the pill is pinned to the viewport instead. The wrapper is zero-height and cannot displace anything; `position:fixed` is on the pill via this override. */ .sg-hub .newfix{position:relative;height:0} .sg-hub .newfix .newpill{position:fixed;bottom:24px;left:auto;right:24px;transform:none} @media(max-width:999px){ /* clear the fixed mobile bar (56px + its border), the same offset the sticky composer uses */ .sg-hub .newfix .newpill{bottom:69px;right:16px} } .sg-hub .post{ background:var(--d-card);border:1px solid var(--d-line);border-radius:11px; padding:16px 18px 12px;margin-bottom:14px;position:relative;overflow:hidden; /* a linked post must clear the sticky topbar, not hide behind it */ scroll-margin-top:76px; } .sg-hub .post.pinned{border-color:var(--d-line-2)} .sg-hub .post.ann::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--sg-grad)} .sg-hub .post.pinned::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--p-echo)} .sg-hub .phead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap} .sg-hub .phead .who{font-size:15px;font-weight:700;letter-spacing:-.008em} .sg-hub .phead .when{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)} .sg-hub .phead .seen{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)} .sg-hub .phead .right{margin-left:auto;display:flex;gap:6px;align-items:center} .sg-hub .ptitle{font-size:18.5px;font-weight:700;letter-spacing:-.016em;margin:0 0 8px;line-height:1.25} .sg-hub .pbody{font-size:15.5px;line-height:1.62;color:var(--d-text)} .sg-hub .pbody p{margin:0 0 12px;max-width:var(--measure)} .sg-hub .pbody p:last-child{margin-bottom:0} .sg-hub .pfoot{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; border-top:1px solid var(--d-line);margin-top:12px;padding-top:10px;min-height:var(--tap); } .sg-hub .react{ display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 9px;border-radius:999px; border:1px solid var(--d-line);background:var(--d-raise);color:var(--d-mid); font-size:13px;cursor:pointer;font-family:inherit;transition:.14s ease; } .sg-hub .react:hover{border-color:var(--d-line-2);color:var(--d-text)} .sg-hub .react.on{border-color:var(--p-echo);color:var(--d-text);background:rgba(47,211,240,.12)} .sg-hub .react .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px} /* The picker stays out of the way until you reach for it. On touch, where there is no hover, it is always there. */ .sg-hub .reactpick{opacity:0;transition:opacity .15s ease} .sg-hub .pfoot:hover .reactpick, .sg-hub .pfoot:focus-within .reactpick, .sg-hub .reactbar:hover .reactpick, .sg-hub .reactbar:focus-within .reactpick{opacity:1} @media (hover:none){.sg-hub .reactpick{opacity:1}} .sg-hub .reactadd{opacity:.75;background:transparent;border-color:transparent} .sg-hub .reactadd:hover{opacity:1;border-color:var(--d-line);background:var(--d-raise)} .sg-hub .replylink{font-size:14px;font-weight:700;color:var(--d-mid)} .sg-hub .replylink:hover{color:var(--d-text)} /* "N new" on a thread that has replies this member has not seen (schema v15). The sidebar badge says something arrived in the channel; this says which conversation, so finding it is not a hunt. Same accent as the sidebar badge on purpose — one visual language for "new", wherever it appears. */ .sg-hub .replylink.hasnew{color:var(--d-text)} .sg-hub .newbadge{ display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px; background:var(--p-echo);color:#07171b;font-size:11px;font-weight:700; font-family:"IBM Plex Mono",monospace;vertical-align:1px; } /* attachments */ .sg-hub .files{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px} .sg-hub .file{ display:inline-flex;align-items:center;gap:9px;max-width:100%; border:1px solid var(--d-line);background:var(--d-raise);border-radius:8px; padding:8px 12px;min-height:var(--tap);color:var(--d-text);transition:.15s ease; } .sg-hub .file:hover{border-color:var(--p-echo)} .sg-hub .file .ext{ font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;font-weight:700; color:#04191E;background:var(--p-echo);border-radius:4px;padding:3px 5px;flex:0 0 auto; } .sg-hub .file .fn{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .file .fs{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted);flex:0 0 auto} /* thread */ .sg-hub .thread{border-left:2px solid var(--d-line);margin:14px 0 0 6px;padding-left:14px} .sg-hub .reply{padding:12px 0;border-bottom:1px solid var(--d-line)} .sg-hub .reply:last-child{border-bottom:0;padding-bottom:2px} .sg-hub .reply .rbody{font-size:15px;line-height:1.6} .sg-hub .reply .rbody p{margin:0 0 10px} .sg-hub .reply .rbody p:last-child{margin-bottom:0} .sg-hub .subthread{border-left:2px solid var(--d-line);margin:10px 0 0 8px;padding-left:14px} /* inline reply preview — the tail of a conversation, shown in the channel. Borrows the subthread's left rule so a preview reads as part of its post rather than as a new card. Each row is quiet plain text and, since rc.23, the reply in full rather than its first line. */ .sg-hub .rprev{border-left:2px solid var(--d-line);margin:2px 0 0 8px;padding-left:14px} .sg-hub .rprevrow{ display:flex;align-items:flex-start;gap:8px;min-width:0; padding:5px 0;color:var(--d-mid);font-size:14px;line-height:1.45; } .sg-hub .rprevrow:hover{color:var(--d-text)} .sg-hub .rprevrow .avatar{flex:0 0 auto} .sg-hub .rprevwho{font-weight:700;color:var(--d-text);white-space:nowrap;flex:0 0 auto} /* THE WHOLE REPLY, WRAPPED (0.3.0-rc.23). This was nowrap + ellipsis, which clipped every reply to one line however short the server-side excerpt was — so dropping the excerpt alone would have changed nothing on screen. pre-wrap keeps the line breaks a member typed, and overflow-wrap:anywhere stops one unbroken string (a long URL, a pasted key) from widening the row and pushing the timestamp off the card. */ .sg-hub .rprevtext{flex:1 1 auto;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere} .sg-hub .rprevrow .when{flex:0 0 auto;margin-left:auto} .sg-hub .rprevmore{display:inline-block;padding:5px 0} @media(max-width:560px){ .sg-hub .rprevrow .when{display:none} } /* ========================================================================= RESOURCE LIBRARY ====================================================================== */ .sg-hub .grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:620px){.sg-hub .grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.sg-hub .grid{grid-template-columns:repeat(3,1fr)}} .sg-hub .grid.two{grid-template-columns:1fr} @media(min-width:760px){.sg-hub .grid.two{grid-template-columns:repeat(2,1fr)}} .sg-hub .rcard{ background:var(--d-card);border:1px solid var(--d-line);border-radius:11px; display:flex;flex-direction:column;overflow:hidden;position:relative;transition:.18s ease; } .sg-hub .rcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--acc,var(--p-echo));z-index:2} .sg-hub .rcard:hover{border-color:var(--acc,var(--p-echo));transform:translateY(-2px)} .sg-hub .rcard .cover{ height:104px;background:var(--d-raise);border-bottom:1px solid var(--d-line); display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; } .sg-hub .rcard .cover img{max-height:52px;max-width:70%;object-fit:contain;opacity:.95} .sg-hub .rcard .cover .glyph{font-size:30px;opacity:.85} .sg-hub .rcard .rbodyx{padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto} .sg-hub .rcard .rn{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3} .sg-hub .rcard .rd{font-size:14px;color:var(--d-mid);line-height:1.5;flex:1 1 auto;margin:0} .sg-hub .rcard .rf{ display:flex;align-items:center;justify-content:space-between;gap:10px; border-top:1px solid var(--d-line);padding-top:10px;min-height:40px; } .sg-hub .rcard .cnt{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)} .sg-hub .rcard .go{font-size:14px;font-weight:700;color:var(--d-text)} /* document reader */ .sg-hub .docwrap{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:940px){.sg-hub .docwrap{grid-template-columns:240px minmax(0,1fr)}} .sg-hub .doclist{border:1px solid var(--d-line);border-radius:10px;background:var(--d-surface); padding:8px;align-self:start} .sg-hub .doclist a{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px; border-radius:6px;font-size:14px;color:var(--d-mid);line-height:1.3} .sg-hub .doclist a:hover{background:rgba(255,255,255,.04);color:var(--d-text)} .sg-hub .doclist a[aria-current="page"]{background:var(--d-raise);color:var(--d-text);font-weight:700} .sg-hub .doclist .dn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .docbody{font-size:15.5px;line-height:1.68} .sg-hub .docbody p{margin:0 0 14px;max-width:var(--measure)} .sg-hub .docbody strong{color:var(--d-text)} /* breadcrumbs */ .sg-hub .bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--d-muted);margin-bottom:14px} .sg-hub .bc a:hover{color:var(--p-echo)} .sg-hub .bc .s{opacity:.5} /* ========================================================================= NOTIFICATIONS / SEARCH / TABLES ====================================================================== */ .sg-hub .tabs{display:flex;gap:4px;border-bottom:1px solid var(--d-line);margin-bottom:18px;flex-wrap:wrap} .sg-hub .tabs a{ min-height:var(--tap);display:inline-flex;align-items:center;padding:0 14px; font-size:14.5px;font-weight:700;color:var(--d-muted);position:relative; } .sg-hub .tabs a:hover{color:var(--d-text)} .sg-hub .tabs a[aria-current="page"]{color:var(--d-text)} .sg-hub .tabs a[aria-current="page"]::after{ content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--p-echo)} .sg-hub .nrow{ display:flex;gap:12px;align-items:flex-start;padding:14px 14px;border:1px solid var(--d-line); border-radius:10px;background:var(--d-card);margin-bottom:10px; } .sg-hub .nrow.unread{border-color:var(--d-line-2);background:var(--d-raise)} .sg-hub .nrow .nk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--p-echo)} .sg-hub .nrow .nt{font-size:14.5px;font-weight:700;margin:3px 0 2px} .sg-hub .nrow .ns{font-size:14px;color:var(--d-mid);line-height:1.5} .sg-hub .nrow .nw{margin-left:auto;font-family:"IBM Plex Mono",monospace; font-size:var(--fs-micro);color:var(--d-muted);flex:0 0 auto} .sg-hub table.t{width:100%;border-collapse:collapse;font-size:14px} .sg-hub table.t th{ text-align:left;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);font-weight:500; padding:10px 12px;border-bottom:1px solid var(--d-line);white-space:nowrap; } .sg-hub table.t td{padding:11px 12px;border-bottom:1px solid var(--d-line);vertical-align:middle} .sg-hub table.t tr:last-child td{border-bottom:0} .sg-hub .tblwrap{overflow-x:auto;border:1px solid var(--d-line);border-radius:10px;background:var(--d-card)} /* ========================================================================= STATE SCREENS ====================================================================== */ .sg-hub .state{ max-width:640px;margin:8vh auto;padding:28px;border:1px solid var(--d-line); border-radius:12px;background:var(--d-card);position:relative;overflow:hidden; } .sg-hub .state::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--acc,var(--s-warn))} .sg-hub .state h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px} .sg-hub .checklist{list-style:none;padding:0;margin:18px 0 0} .sg-hub .checklist li{ display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--d-line); font-size:14.5px; } .sg-hub .checklist li:last-child{border-bottom:0} .sg-hub .checklist .mk{ flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px; } .sg-hub .checklist .ok{background:rgba(63,199,135,.16);color:var(--s-up)} .sg-hub .checklist .no{background:rgba(217,105,92,.16);color:var(--s-down)} /* sign-in / persona picker (prototype only) */ .sg-hub .signin{max-width:940px;margin:6vh auto;padding:0 20px} .sg-hub .persona{ display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--d-line); border-radius:10px;background:var(--d-card);transition:.15s ease;margin-bottom:10px; } .sg-hub .persona:hover{border-color:var(--p-echo);transform:translateY(-1px)} .sg-hub .persona .pn{font-size:16px;font-weight:700;letter-spacing:-.01em} .sg-hub .persona .pd{font-size:13.5px;color:var(--d-muted);line-height:1.45} .sg-hub .persona .pr{margin-left:auto;text-align:right;flex:0 0 auto} /* flash */ .sg-hub .flash{ border:1px solid rgba(47,211,240,.4);background:rgba(47,211,240,.08);color:var(--d-text); border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:14.5px; } /* empty state */ .sg-hub .empty{ border:1px dashed var(--d-line-2);border-radius:11px;padding:34px 22px;text-align:center; color:var(--d-muted);background:var(--d-surface); } .sg-hub .empty .eh{font-size:16.5px;font-weight:700;color:var(--d-text);margin-bottom:6px} /* ========================================================================= FORMS (admin surfaces) Same vocabulary as the rest of the system: card surfaces, 1px lines, 6px radii, 44px targets, mono micro-labels. No new visual language. ====================================================================== */ .sg-hub .fgrid{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:720px){.sg-hub .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .sg-hub .fld{display:flex;flex-direction:column;gap:6px;min-width:0} .sg-hub .fld > span{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em; text-transform:uppercase;color:var(--d-muted); } .sg-hub .inp{ width:100%;min-height:var(--tap);background:var(--d-raise);border:1px solid var(--d-line); border-radius:6px;color:var(--d-text);padding:9px 12px;font-family:inherit;font-size:14.5px; line-height:1.5;transition:border-color .15s ease; } .sg-hub textarea.inp{min-height:88px;resize:vertical;line-height:1.6} .sg-hub select.inp{appearance:none;padding-right:30px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CA0A5' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 9px center;background-size:16px} .sg-hub .inp::placeholder{color:var(--d-muted)} .sg-hub .inp:hover{border-color:var(--d-line-2)} .sg-hub .inp:focus{border-color:var(--p-echo);outline:none} .sg-hub input[type="file"].inp{padding:8px 10px;font-size:13.5px;cursor:pointer} .sg-hub input[type="file"].inp::file-selector-button{ font-family:"Chivo",sans-serif;font-weight:700;font-size:13px;margin-right:10px; background:transparent;color:var(--d-text);border:1px solid var(--d-line-2); border-radius:5px;padding:6px 12px;cursor:pointer} .sg-hub input[type="file"].inp::file-selector-button:hover{border-color:var(--d-mid)} .sg-hub .stickysave{ position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:rgba(12,19,21,.96);backdrop-filter:blur(8px); border:1px solid var(--d-line);border-radius:10px;padding:12px 16px;margin-top:8px; } @media(max-width:999px){.sg-hub .stickysave{bottom:60px}} .sg-hub .stickysave .btn{margin-left:auto} /* ---------- chosen-file chips in a composer ---------- A chip carrying a pasted screenshot has to answer two questions the filename cannot: WHICH capture is this, and how do I take it back off. Hence the thumbnail and the ✕. Padding is tightened on the left when a thumbnail is present so the image sits flush in the chip rather than floating in it. */ .sg-hub .picked{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px} .sg-hub .picked .chip{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--d-line); background:var(--d-raise);border-radius:6px;padding:6px 6px 6px 10px;font-size:13px;max-width:100%; } .sg-hub .picked .chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .picked .chip .sz{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--d-muted)} .sg-hub .picked .chip.bad{border-color:rgba(217,105,92,.5);color:var(--s-down)} .sg-hub .picked .chip .thumb{ width:34px;height:34px;object-fit:cover;border-radius:4px;flex:0 0 auto; margin:-6px 0 -6px -10px;border-right:1px solid var(--d-line);background:var(--d-bg); } .sg-hub .picked .chip .rm{ flex:0 0 auto;width:22px;height:22px;line-height:1;border:0;border-radius:4px;cursor:pointer; background:transparent;color:var(--d-muted);font-size:15px;transition:.14s ease; } .sg-hub .picked .chip .rm:hover{background:rgba(217,105,92,.14);color:var(--s-down)} .sg-hub .picked .chip .rm:focus-visible{outline:2px solid var(--p-echo);outline-offset:1px} /* ---------- posted images ---------- SCREENSHOTS ARE THE POINT, so they are shown whole. This was `max-height:260px` with `object-fit:cover`. The cap is what actually hurt: a 1600x900 screenshot rendered at 463x260, far too small to read a chart or a platform window in, so the only way to see what somebody had posted was to open it and scrolling a channel told you nothing. Measured against the same post, it is now 783x440 — the full post column. `object-fit:cover` was not in fact cropping these, and it is worth being accurate about that: with `width:auto` the box usually matched the image's own ratio, so there was nothing to crop. It goes anyway, because it crops the moment the box and the image disagree — which is exactly what happens once images are allowed to fill the column. Keeping it would have been a cropping bug waiting for the first unusual aspect ratio. So: natural ratio, never cropped, as wide as the column allows and no taller than most of the window. `width:auto` also means a SMALL image is not stretched up to the column and left soft — it renders at its own size. EVERY image gets the full width, including when there are several. Tiling two-up was tried first and measured worse: on an 820px column a wide screenshot came out at 383px, which is SMALLER than the 425px the old 260px cap gave it. A tidy grid that shrinks the thing you came to look at defeats the point. They stack instead — a post with four screenshots is longer to scroll past, which is the correct trade when the whole request was to see them while scrolling. Each is capped a little lower than a lone image so a multi-shot post does not become a page per picture. */ .sg-hub .shots{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 2px;justify-items:start} .sg-hub .shot{ display:block;position:relative;border:1px solid var(--d-line);border-radius:10px; overflow:hidden;background:var(--d-raise);max-width:100%;transition:.16s ease; } .sg-hub .shot:hover{border-color:var(--p-echo)} .sg-hub .shot img{ display:block;width:auto;height:auto;max-width:100%;max-height:72vh; /* The width/height attributes carry the real dimensions, so the browser reserves the right space before the bytes arrive. Without this the whole channel jumps under the reader as each image lands — which matters far more now that an image is a screen's worth rather than a 260px strip. */ background:var(--d-bg); } .sg-hub .shots.many .shot img{max-height:52vh} .sg-hub .shot .shotname{ display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--d-muted); padding:6px 10px;border-top:1px solid var(--d-line);max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* a reaction count shown where reacting is not permitted */ .sg-hub .react.static{cursor:default;opacity:.85} /* ========================================================================= RICH COMPOSER Same card/line/radius language; only the editing affordances are new. ====================================================================== */ .sg-hub .composer.rich{flex-direction:row} .sg-hub .composer.rich.compact{padding:12px} .sg-hub .titlefield{margin-bottom:10px;font-size:16px;font-weight:700} .sg-hub .tbar{ display:flex;flex-wrap:wrap;gap:2px;align-items:center; border-bottom:1px solid var(--d-line);padding:0 0 8px;margin-bottom:8px; } .sg-hub .tb{ min-width:32px;height:32px;padding:0 7px;border-radius:5px;border:1px solid transparent; background:transparent;color:var(--d-mid);font-family:"Chivo",sans-serif;font-size:13.5px; cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.14s ease; } .sg-hub .tb:hover{background:var(--d-raise);color:var(--d-text);border-color:var(--d-line)} .sg-hub .tb b,.sg-hub .tb i,.sg-hub .tb u,.sg-hub .tb s{font-size:14px} .sg-hub .tbsep{width:1px;height:18px;background:var(--d-line);margin:0 5px} .sg-hub .editor{ min-height:88px;max-height:460px;overflow-y:auto;outline:none; font-size:15.5px;line-height:1.62;color:var(--d-text);padding:2px 0; } .sg-hub .composer.compact .editor{min-height:56px} .sg-hub .editor:empty::before{content:attr(data-placeholder);color:var(--d-muted)} .sg-hub .editor p{margin:0 0 10px;max-width:none} .sg-hub .editor p:last-child{margin-bottom:0} .sg-hub .editor h3,.sg-hub .editor h4{margin:12px 0 8px;font-weight:700;letter-spacing:-.014em} .sg-hub .editor h3{font-size:19px} .sg-hub .editor h4{font-size:16.5px} .sg-hub .editor ul,.sg-hub .editor ol{margin:0 0 10px;padding-left:22px} .sg-hub .editor li{margin:3px 0} .sg-hub .editor blockquote,.sg-hub .pbody blockquote,.sg-hub .rbody blockquote,.sg-hub .docbody blockquote{ margin:10px 0;padding:4px 0 4px 14px;border-left:2px solid var(--d-line-2);color:var(--d-mid)} .sg-hub .editor pre,.sg-hub .pbody pre,.sg-hub .rbody pre,.sg-hub .docbody pre{ background:var(--d-bg);border:1px solid var(--d-line);border-radius:8px; padding:12px 14px;overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:13px; line-height:1.55;margin:10px 0} .sg-hub .editor a,.sg-hub .pbody a,.sg-hub .rbody a,.sg-hub .docbody a{ color:var(--p-echo);text-decoration:underline;text-underline-offset:2px} /* rendered rich bodies share the editor's block rhythm */ .sg-hub .pbody h3,.sg-hub .rbody h3{font-size:18px;font-weight:700;margin:12px 0 8px;letter-spacing:-.014em} .sg-hub .pbody h4,.sg-hub .rbody h4{font-size:16px;font-weight:700;margin:12px 0 6px} .sg-hub .pbody ul,.sg-hub .pbody ol,.sg-hub .rbody ul,.sg-hub .rbody ol{margin:0 0 12px;padding-left:22px} .sg-hub .pbody li,.sg-hub .rbody li{margin:3px 0} .sg-hub .pbody hr,.sg-hub .rbody hr{border:0;border-top:1px solid var(--d-line);margin:16px 0} /* mentions */ .sg-hub .men{color:var(--p-echo);font-weight:700;text-decoration:none} .sg-hub a.men:hover{text-decoration:underline} .sg-hub .mentionbox{ position:relative;margin-top:6px;border:1px solid var(--d-line-2);border-radius:8px; background:var(--d-surface);box-shadow:0 18px 40px -20px #000;overflow:hidden;max-width:340px; } .sg-hub .mrow{ display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:6px 10px; background:transparent;border:0;color:var(--d-text);cursor:pointer;text-align:left;font-family:inherit; } .sg-hub .mrow:hover,.sg-hub .mrow.on{background:var(--d-raise)} .sg-hub .mrow .mn{flex:1 1 auto;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .mrow .mr{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--d-muted); text-transform:uppercase;letter-spacing:.08em} /* drag and drop */ .sg-hub .dropzone{ margin-top:10px;border:1px dashed var(--d-line-2);border-radius:8px;padding:16px;text-align:center; font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em; text-transform:uppercase;color:var(--d-muted);transition:.15s ease; } .sg-hub .dropzone.on{border-color:var(--p-echo);color:var(--p-echo);background:rgba(47,211,240,.06)} /* search highlighting */ .sg-hub mark{background:rgba(47,211,240,.22);color:var(--d-text);border-radius:2px;padding:0 2px} /* edited / locked markers */ .sg-hub .edited{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)} .sg-hub .lockbar{ display:flex;align-items:center;gap:10px;border:1px solid rgba(224,172,87,.35); background:rgba(224,172,87,.07);border-radius:8px;padding:10px 14px;margin:14px 0; font-size:14px;color:var(--s-warn); } /* ========================================================================= LIBRARY ADMIN — contextual controls layered onto the member-facing views Same tokens, same radii, same border-led depth. Nothing here is a new visual language; it is the existing one, shown only to staff. ====================================================================== */ .sg-hub .libbar{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; border:1px solid var(--d-line);border-radius:10px;background:var(--d-surface); padding:10px 12px;margin-bottom:20px; } .sg-hub .libbarlbl{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--d-muted);margin-right:2px; } .sg-hub .libbarnote{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted); } @media(max-width:700px){.sg-hub .libbarnote{display:none}} /* the ••• disclosure —
, so it works with no JS */ .sg-hub .menu{position:relative;display:inline-block} .sg-hub .menu > summary{ list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; min-width:34px;height:34px;padding:0 9px;border-radius:6px;border:1px solid var(--d-line); background:var(--d-raise);color:var(--d-mid);font-size:13px;letter-spacing:.06em; transition:.14s ease; } .sg-hub .menu > summary::-webkit-details-marker{display:none} .sg-hub .menu > summary:hover{color:var(--d-text);border-color:var(--d-line-2)} .sg-hub .menu[open] > summary{border-color:var(--p-echo);color:var(--d-text)} /* when the summary is styled as a button, keep the button look */ .sg-hub .menu > summary.btn{min-width:0;height:auto} .sg-hub .menupanel{ position:absolute;right:0;top:calc(100% + 6px);z-index:60; width:min(320px,calc(100vw - 40px)); background:var(--d-surface);border:1px solid var(--d-line-2);border-radius:10px; box-shadow:0 26px 60px -24px #000;padding:12px;display:flex;flex-direction:column;gap:10px; max-height:min(70vh,560px);overflow-y:auto; } .sg-hub .menupanel.wide{width:min(380px,calc(100vw - 40px))} .sg-hub .menuhd{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em; text-transform:uppercase;color:var(--d-muted);margin:0; } .sg-hub .menuform{display:flex;flex-direction:column;gap:8px; border-top:1px solid var(--d-line);padding-top:10px} .sg-hub .menuform:first-of-type{border-top:0;padding-top:0} .sg-hub .menurow{display:flex;align-items:center;gap:6px;border-top:1px solid var(--d-line);padding-top:10px} .sg-hub .menulbl{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted);margin-right:auto} .sg-hub .menunote{font-size:12px;color:var(--d-muted);line-height:1.45;margin:0} .sg-hub .menupanel .btn.danger{color:var(--s-down);border-color:rgba(217,105,92,.42)} .sg-hub .menupanel .btn.danger:hover{background:rgba(217,105,92,.1);border-color:var(--s-down)} .sg-hub .submenu > summary{ cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);padding:6px 0; border-top:1px solid var(--d-line); } .sg-hub .submenu > summary:hover{color:var(--d-text)} /* ---------- title marker field: preset list, emoji picker, preview ---------- */ .sg-hub .markerfield{display:flex;flex-direction:column;gap:8px} .sg-hub .mkcustom{display:flex;gap:6px;align-items:center} .sg-hub .mkcustom .inp{flex:1 1 auto;min-width:0} .sg-hub .emojipick > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;align-self:flex-start} .sg-hub .emojipick > summary::-webkit-details-marker{display:none} .sg-hub .emojipanel{ margin-top:6px;max-height:232px;overflow:auto;border:1px solid var(--d-line); border-radius:8px;padding:8px;background:var(--d-raise); } .sg-hub .emojigrp{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--d-muted);margin:8px 0 4px; } .sg-hub .emojigrp:first-child{margin-top:0} .sg-hub .emojigrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px} .sg-hub .emojibtn{ font-size:18px;line-height:1;padding:5px 0;background:none;border:1px solid transparent; border-radius:6px;cursor:pointer; } .sg-hub .emojibtn:hover,.sg-hub .emojibtn:focus-visible{background:var(--d-surface);border-color:var(--d-line-2)} .sg-hub .mkpreview{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--d-muted)} .sg-hub .mkchip{ display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--d-line-2); background:var(--d-raise);border-radius:6px;padding:4px 8px;color:var(--d-text);font-size:13px;font-weight:700; } .sg-hub .mkchip [data-marker-preview-title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .mknote{font-family:"IBM Plex Mono",monospace;font-size:11px} .sg-hub .markerfield.bad [data-marker-custom]{border-color:rgba(217,105,92,.6)} .sg-hub .markerfield.bad .mknote{color:var(--s-down)} /* ---------- the collection / folder editor ---------- */ .sg-hub .menupanel.editorpanel{max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain} .sg-hub .cardeditor{gap:12px} .sg-hub .edsec{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--d-line);padding-top:10px} .sg-hub .cardeditor > .edsec:first-of-type{border-top:0;padding-top:0} .sg-hub .edsave{ position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 0 2px;border-top:1px solid var(--d-line);background:var(--d-surface); } .sg-hub .edstatus{font-size:12px;line-height:1.4;color:var(--d-muted);min-width:0} .sg-hub .edstatus[data-kind="ok"]{color:var(--p-recon)} .sg-hub .edstatus[data-kind="error"]{color:var(--s-down)} .sg-hub .edactions{border-top:1px dashed var(--d-line-2);padding-top:12px;margin-top:2px} /* ---------- accent: presets, custom colour, preview ---------- */ .sg-hub .accentfield{display:flex;flex-direction:column;gap:8px} .sg-hub .accustom{display:flex;flex-direction:column;gap:6px} .sg-hub .accustom[hidden]{display:none} .sg-hub .accrow{display:flex;gap:8px;align-items:center} .sg-hub .accrow .inp{flex:1 1 auto;min-width:0;font-family:"IBM Plex Mono",monospace;letter-spacing:.04em} .sg-hub .acpick{ flex:0 0 auto;width:42px;height:34px;padding:2px;border:1px solid var(--d-line-2); border-radius:6px;background:var(--d-raise);cursor:pointer; } .sg-hub .acprev{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--d-muted)} .sg-hub .acsample{ position:relative;display:inline-flex;align-items:center;min-width:150px;max-width:100%;overflow:hidden; padding:9px 10px 7px;border:1px solid var(--acc,var(--p-echo));border-radius:8px;background:var(--d-card); color:var(--d-text);font-size:12.5px;font-weight:700; } .sg-hub .acsample .acbar{position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc,var(--p-echo))} .sg-hub .accentfield.bad [data-accent-hex]{border-color:rgba(217,105,92,.6)} .sg-hub .accentfield.bad [data-accent-msg]{color:var(--s-down)} /* a card with a menu pinned to its corner */ .sg-hub .rcardwrap{position:relative;display:flex} .sg-hub .rcardwrap > .rcard{flex:1 1 auto} .sg-hub .cardmenu{position:absolute;top:8px;right:8px;z-index:5} .sg-hub .cardmenu.inline{position:static} .sg-hub .cardmenu .menu > summary{background:rgba(6,9,10,.78);backdrop-filter:blur(4px)} /* drag-to-reorder */ .sg-hub [data-sortable] [draggable="true"]{cursor:grab} .sg-hub .dragging{opacity:.45} .sg-hub .dragover{outline:2px dashed var(--p-echo);outline-offset:2px;border-radius:11px} .sg-hub tr.dragover{outline-offset:-2px} .sg-hub .dropzone.always{display:block} .sg-hub .badge.quiet{background:var(--d-line-2);color:var(--d-text)} /* ========================================================================= COMMUNITY STRUCTURE (/admin/structure) Rows, not a table, and editors that open in normal flow. The floating `.menupanel` the library uses is absolutely positioned, and both containers here clip their overflow (`.card` and `.tblwrap`), so it came out cut off. In flow it also gives a phone a full-width form rather than a 320px panel pinned to the right edge. ====================================================================== */ .sg-hub .strhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .sg-hub .strgrip{font-family:"IBM Plex Mono",monospace;color:var(--d-muted);cursor:grab;user-select:none} .sg-hub .strlist{display:flex;flex-direction:column;gap:8px;margin:12px 0 12px} .sg-hub .strow{ border:1px solid var(--d-line);border-radius:10px;background:var(--d-raise); padding:10px 12px;min-width:0; } .sg-hub .strow.arch{opacity:.72} .sg-hub .strow .strname{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px} .sg-hub .strow .strname > a{font-weight:700} .sg-hub .strmeta{font-size:11px;color:var(--d-muted)} .sg-hub .strnote{font-size:12.5px;margin:8px 0 0;max-width:64ch;line-height:1.5} /* The disclosure. `.strfold` keeps its own summary looking like the quiet button it is, and drops the browser's default triangle. */ .sg-hub .strfold{margin-top:10px} .sg-hub .strfold > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center} .sg-hub .strfold > summary::-webkit-details-marker{display:none} .sg-hub .strpanel{ margin-top:10px;border:1px solid var(--d-line);border-radius:10px; background:var(--d-surface);padding:12px 14px;max-width:520px; display:flex;flex-direction:column;gap:12px; } @media(max-width:640px){ .sg-hub .strpanel{max-width:none} .sg-hub .strow .strname{flex-basis:100%} } /* ========================================================================= SUPPORT CONVERSATIONS ====================================================================== */ .sg-hub .convgrid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:960px){.sg-hub .convgrid{grid-template-columns:320px minmax(0,1fr)}} .sg-hub .convlist{border:1px solid var(--d-line);border-radius:10px;background:var(--d-surface); overflow:hidden;align-self:start} .sg-hub .convrow{ display:block;padding:12px 14px;border-bottom:1px solid var(--d-line);color:var(--d-mid); } .sg-hub .convrow:last-child{border-bottom:0} .sg-hub .convrow:hover{background:rgba(255,255,255,.03)} .sg-hub .convrow[aria-current="page"]{background:var(--d-raise)} .sg-hub .convrow .cs{display:flex;align-items:center;gap:8px;margin-bottom:4px} .sg-hub .convrow .ct{font-size:14.5px;font-weight:700;color:var(--d-text);flex:1 1 auto; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sg-hub .convrow .cp{font-size:13px;color:var(--d-muted);line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sg-hub .msg{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--d-line)} .sg-hub .msg:last-child{border-bottom:0} .sg-hub .msg.staff{background:rgba(47,211,240,.04);margin:0 -14px;padding:12px 14px; border-left:2px solid var(--p-echo)} .sg-hub .msg .mbody{font-size:15px;line-height:1.6;min-width:0;flex:1 1 auto} .sg-hub .msg .mbody p{margin:0 0 8px;max-width:none} .sg-hub .msg .mbody p:last-child{margin-bottom:0} /* mobile bottom bar */ .sg-hub .mobar{ position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex; background:rgba(12,19,21,.97);backdrop-filter:blur(8px);border-top:1px solid var(--d-line); } @media(min-width:1000px){.sg-hub .mobar{display:none}} .sg-hub .mobar a{ flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:56px;color:var(--d-muted);font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:.06em;text-transform:uppercase;position:relative; } .sg-hub .mobar a[aria-current="page"]{color:var(--p-echo)} .sg-hub .mobar svg{width:20px;height:20px} @media(max-width:999px){.sg-hub .canvas{padding-bottom:84px}} .sg-hub .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:65} .sg-hub .scrim.on{display:block} @media(min-width:1000px){.sg-hub .scrim{display:none!important}}