/* Main Channel brand bundle v1, sources 56ef3ebcd8c1 Generated by tools/build-brand.sh. Do not edit. Sources: mc-tokens.css + mc-core.css */ /* ========================================================================== Main Channel, Design Tokens v1 https://www.mainchannel.app/brand/v1/mc-tokens.css The single source of truth for the brand. Every Main Channel property, marketing site, owner portal, dashboards, admin tools, reads its colour, type, spacing and elevation from here and nowhere else. All names are prefixed --mc-* so this file can be dropped into an existing application without colliding with variables already defined there. THEMES :root → dark (default; the brand's native state) [data-theme="light"] → light (recommended for data-dense admin tools) [data-theme="dark"] → explicit dark, wins over a light ancestor Set the theme on : Nothing switches automatically, prefers-color-scheme is deliberately NOT wired up, so an app's appearance never changes out from under an operator mid-task. ========================================================================== */ :root{ /* ---- Depth ramp: page → raised surface → hover ------------------------ */ --mc-bg:#05121A; --mc-surface:#081B25; --mc-surface-2:#0B2430; --mc-surface-3:#10303E; --mc-surface-4:#17404F; /* ---- Hairlines ------------------------------------------------------- */ --mc-line:rgba(150,196,218,.13); --mc-line-strong:rgba(150,196,218,.26); /* ---- Text ------------------------------------------------------------ */ --mc-text:#E8F2F7; --mc-text-dim:#93AFBE; /* Was #65808F, which measured 3.85:1 on --mc-surface-2, under the 4.5 floor for normal text, so any small print sitting on a card failed. #8596A4 clears 4.5:1 on every surface in use, including --mc-surface-3, which is what a hovered table row is, and stays clearly softer than --mc-text-dim (4.56 against 6.02 there), so the hierarchy this token exists to create survives. */ --mc-text-faint:#8596A4; --mc-text-on-accent:#FFFFFF; /* Accents on --mc-bg-deep, which stays dark in BOTH themes. Deliberately identical in light and dark: the surface does not flip, so this must not either. The theme-following accents fail here (light --mc-amber is 2.19:1, light --mc-blue-bright 2.12:1, both under the 3.0 large-text floor). */ --mc-accent-on-dark:#63B6E6; /* ---- Channel blue, sampled from the Smith Lake mark ----------------- */ /* --mc-blue is a FILL, and .mc-btn--primary paints white on it, so its value is set by that pairing rather than by taste. It was #2E7FB5, giving white 4.36:1, under the 4.5 floor for normal text, so every primary button in the Fleet failed. #2D7BAF is the smallest darkening that clears it, at 4.60:1, with hue and saturation held. --mc-blue-hover goes DARKER than rest, the way the light theme already did. It used to go lighter, to #3690CB, which dropped white to 3.50:1, so hovering a button made its label harder to read. It now improves to 5.60:1, and the two states stay as distinguishable as the light theme's pair (1.22 against 1.32). Both still clear the 3.0 floor for non-text UI against the page, at 4.12:1 on --mc-bg and 3.82:1 on --mc-surface. */ --mc-blue:#2D7BAF; --mc-blue-hover:#286D9B; --mc-blue-bright:#63B6E6; --mc-blue-deep:#1F4E79; --mc-blue-wash:rgba(99,182,230,.10); /* Deep end of the channel, for full-bleed gradients. */ --mc-bg-deep:#0B3B52; /* ---- Channel-marker lights (also the semantic status set) ------------ */ --mc-green:#42B98A; /* underway · success · live */ --mc-amber:#E9A23B; /* in the slip · warning · pending */ /* Red carries THREE roles and needs three values, where green and amber need one. It is the only marker that is also a button fill, so it is the only one asked to sit under white text and over a dark surface at the same time. Those two demands pull on the same luminance in opposite directions: white needs it darker, the surface needs it lighter. The feasible band between them is 0.006 wide in relative luminance, which is not a band, it is a coincidence. One value cannot hold all three roles, so it does not try to. --mc-red MARKER, non-text: dots, left borders, invalid field rims. Sized against --mc-surface-3, a hovered row, at 3.42:1 over the 3.0 floor for non-text UI. --mc-red-deep FILL under white: .mc-btn--danger and nothing else. White measures 4.81:1 on it, over the 4.5 floor. --mc-red-bright TEXT: sized against the worst background it can land on, --mc-red-wash over --mc-surface-3, inside a badge on a hovered row, at 4.53:1. Sizing it against the plain surface is not enough, and sizing it against --mc-surface-4 would wash it pink for a surface nothing uses. The history: #D9534F served all three and failed all three, giving white 3.96:1 and text 4.05:1 on --mc-surface-2. Splitting the text off fixed two of them and left the fill at 4.51:1, passing by 0.01, which is a rounding error rather than a margin. This split is the rest of that fix. */ --mc-red:#D8504C; /* marker: dot · border · invalid rim */ --mc-red-deep:#D33733; /* fill: .mc-btn--danger, under white */ /* Hover goes DARKER than rest, the way --mc-blue-hover does and for the same reason. The danger button used filter:brightness(1.1), which lightens the fill and dropped white to 4.07:1, so hovering the delete button made its label harder to read at the exact moment the user wants to be sure of it. This improves to 5.71:1 instead. */ --mc-red-deep-hover:#C12D2A; --mc-red-bright:#E27E7B; /* text: error · negative delta */ /* A FILL, not a text colour: status dots and -wash backgrounds. Muted TEXT is --mc-text-dim, which is what .mc-badge itself uses on --mc-slate-wash. Painting text in --mc-slate on its own wash measures 2.76:1. */ --mc-slate:#5E7C8C; /* on the trailer · neutral · idle */ --mc-green-wash:rgba(66,185,138,.12); --mc-amber-wash:rgba(233,162,59,.12); --mc-red-wash:rgba(216,80,76,.12); /* 12% of --mc-red, kept in step with it */ --mc-slate-wash:rgba(94,124,140,.12); /* ---- Focus ----------------------------------------------------------- */ --mc-focus:#63B6E6; --mc-focus-ring:0 0 0 3px rgba(99,182,230,.38); /* ---- Elevation ------------------------------------------------------- */ --mc-shadow-sm:0 1px 2px rgba(0,0,0,.36); --mc-shadow:0 6px 20px -8px rgba(0,0,0,.55); --mc-shadow-lg:0 18px 48px -16px rgba(0,0,0,.7); /* ---- Radius ---------------------------------------------------------- */ --mc-radius-sm:7px; --mc-radius:11px; --mc-radius-md:14px; --mc-radius-lg:22px; --mc-radius-pill:999px; /* ---- Spacing scale (4px base) ---------------------------------------- */ --mc-space-1:4px; --mc-space-2:8px; --mc-space-3:12px; --mc-space-4:16px; --mc-space-5:24px; --mc-space-6:32px; --mc-space-7:48px; --mc-space-8:64px; /* ---- Type ------------------------------------------------------------ */ --mc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mc-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --mc-text-xs:.75rem; --mc-text-sm:.86rem; --mc-text-base:.95rem; --mc-text-lg:1.08rem; --mc-text-xl:1.32rem; --mc-text-2xl:1.75rem; --mc-text-3xl:2.4rem; --mc-leading:1.6; --mc-leading-tight:1.2; /* ---- Layout ---------------------------------------------------------- */ --mc-maxw:1180px; --mc-maxw-app:1440px; --mc-sidebar-w:248px; --mc-topbar-h:60px; /* ---- Motion ---------------------------------------------------------- */ --mc-ease:cubic-bezier(.4,0,.2,1); --mc-fast:.15s; --mc-normal:.25s; color-scheme:dark; } /* ========================================================================== Light theme, for data-dense admin surfaces where operators live all day. Same hues, inverted depth ramp. Blue darkens so it stays AA on white. ========================================================================== */ [data-theme="light"]{ --mc-bg:#F4F8FA; --mc-surface:#FFFFFF; --mc-surface-2:#FFFFFF; --mc-surface-3:#EEF4F8; --mc-surface-4:#E3ECF2; --mc-line:rgba(23,64,79,.14); --mc-line-strong:rgba(23,64,79,.28); --mc-text:#0B2430; --mc-text-dim:#4A6675; /* Was #7690A0 at 3.14:1 on --mc-bg. Sized against --mc-surface-3, which is what a hovered row is, and against each -wash over it, since that is where badge text lands. Still softer than --mc-text-dim. */ --mc-text-faint:#5D7282; --mc-text-on-accent:#FFFFFF; /* Accents on --mc-bg-deep, which stays dark in BOTH themes. Deliberately identical in light and dark: the surface does not flip, so this must not either. The theme-following accents fail here (light --mc-amber is 2.19:1, light --mc-blue-bright 2.12:1, both under the 3.0 large-text floor). */ --mc-accent-on-dark:#63B6E6; --mc-blue:#1F6FA5; --mc-blue-hover:#175C8A; /* Diverges from --mc-blue here on purpose. --mc-blue is the fill and only has to carry white; --mc-blue-bright is text and has to clear 4.5:1 on --mc-blue-wash over --mc-surface-3, which #1F6FA5 missed at 4.34:1. */ --mc-blue-bright:#1E6CA0; --mc-blue-deep:#123C5C; --mc-blue-wash:rgba(31,111,165,.09); --mc-bg-deep:#123C5C; --mc-green:#1B7354; --mc-amber:#8D5A09; /* Light needs no split at all: #B23B37 measures 5.88:1 as text on white, 5.88:1 under white on the danger button, and 5.30:1 as a marker on --mc-surface-3. All three roles clear their floors on one value, because the light ramp is not squeezed the way the dark one is. All three names are still declared, so a rule written against any of them behaves the same in both themes. */ --mc-red:#B23B37; --mc-red-deep:#B23B37; --mc-red-deep-hover:#9E3431; --mc-red-bright:#B23B37; /* A FILL, not a text colour: status dots and -wash backgrounds. Muted TEXT is --mc-text-dim, which is what .mc-badge itself uses on --mc-slate-wash. Painting text in --mc-slate on its own wash measures 2.76:1. */ --mc-slate:#5E7C8C; --mc-green-wash:rgba(30,127,92,.11); --mc-amber-wash:rgba(166,106,11,.13); --mc-red-wash:rgba(178,59,55,.10); --mc-slate-wash:rgba(94,124,140,.11); --mc-focus:#1F6FA5; --mc-focus-ring:0 0 0 3px rgba(31,111,165,.30); --mc-shadow-sm:0 1px 2px rgba(11,36,48,.09); --mc-shadow:0 6px 20px -8px rgba(11,36,48,.20); --mc-shadow-lg:0 18px 48px -16px rgba(11,36,48,.26); color-scheme:light; } /* Explicit dark wins over an inherited light ancestor. */ [data-theme="dark"]{ --mc-bg:#05121A; --mc-surface:#081B25; --mc-surface-2:#0B2430; --mc-surface-3:#10303E; --mc-surface-4:#17404F; --mc-line:rgba(150,196,218,.13); --mc-line-strong:rgba(150,196,218,.26); --mc-text:#E8F2F7; --mc-text-dim:#93AFBE; /* See the note in :root. */ --mc-text-faint:#8596A4; /* See the note in :root. White on the old values failed on every primary button, and hover made it worse rather than better. */ --mc-blue:#2D7BAF; --mc-blue-hover:#286D9B; --mc-blue-bright:#63B6E6; --mc-blue-deep:#1F4E79; --mc-blue-wash:rgba(99,182,230,.10); /* Deep end of the channel, for full-bleed gradients. */ --mc-bg-deep:#0B3B52; --mc-green:#42B98A; --mc-amber:#E9A23B; /* See the note in :root. --mc-red-wash is re-declared here because the light theme overrides it and this block has to win over a light ancestor. */ --mc-red:#D8504C; --mc-red-deep:#D33733; --mc-red-deep-hover:#C12D2A; --mc-red-bright:#E27E7B; --mc-red-wash:rgba(216,80,76,.12); --mc-focus:#63B6E6; --mc-focus-ring:0 0 0 3px rgba(99,182,230,.38); color-scheme:dark; } /* ========================================================================== Main Channel, Core Components v1 https://www.mainchannel.app/brand/v1/mc-core.css Requires mc-tokens.css. Every class is prefixed .mc-* so this file can be added to an existing application without touching a single line of its current stylesheet. Migrate one component at a time: add the class, delete the old rule. This file styles NOTHING by element selector except :root-level basics you opt into with .mc-base on . Dropping it in is inert until you use it. ========================================================================== */ /* ---- Opt-in page baseline ---------------------------------------------- */ .mc-base{ margin:0; background:var(--mc-bg); color:var(--mc-text); font-family:var(--mc-font); font-size:var(--mc-text-base); line-height:var(--mc-leading); -webkit-font-smoothing:antialiased; } .mc-base *,.mc-base *::before,.mc-base *::after{box-sizing:border-box} .mc-container{width:100%;max-width:var(--mc-maxw);margin:0 auto;padding:0 var(--mc-space-5)} .mc-container--app{max-width:var(--mc-maxw-app)} :where(.mc-base) a{color:var(--mc-blue-bright);text-decoration:none} :where(.mc-base) a:hover{text-decoration:underline} /* Consistent focus everywhere, keyboard only. */ .mc-base :focus-visible, [class^="mc-"]:focus-visible,[class*=" mc-"]:focus-visible{ outline:2px solid var(--mc-focus);outline-offset:2px;border-radius:var(--mc-radius-sm); } /* ========================================================================== Type ========================================================================== */ .mc-h1{font-size:var(--mc-text-3xl);line-height:var(--mc-leading-tight);letter-spacing:-.025em;font-weight:700;margin:0} .mc-h2{font-size:var(--mc-text-2xl);line-height:var(--mc-leading-tight);letter-spacing:-.02em;font-weight:700;margin:0} .mc-h3{font-size:var(--mc-text-xl);line-height:1.3;letter-spacing:-.015em;font-weight:650;margin:0} .mc-h4{font-size:var(--mc-text-lg);line-height:1.35;font-weight:650;margin:0} .mc-eyebrow{ font-size:var(--mc-text-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--mc-blue-bright);margin:0 0 var(--mc-space-3); } .mc-muted{color:var(--mc-text-dim)} .mc-faint{color:var(--mc-text-faint)} .mc-mono{font-family:var(--mc-font-mono);font-size:.92em} .mc-lede{font-size:var(--mc-text-lg);color:var(--mc-text-dim);max-width:60ch;margin:0} /* ========================================================================== Page header, the top of every app screen ========================================================================== */ .mc-page-head{ display:flex;align-items:flex-start;gap:var(--mc-space-4);flex-wrap:wrap; padding-bottom:var(--mc-space-5);margin-bottom:var(--mc-space-6); border-bottom:1px solid var(--mc-line); } .mc-page-head__title{flex:1 1 320px;min-width:0} .mc-page-head__title p{margin:var(--mc-space-2) 0 0;color:var(--mc-text-dim);font-size:var(--mc-text-sm)} .mc-page-head__actions{display:flex;gap:var(--mc-space-2);flex-wrap:wrap;align-items:center} /* ========================================================================== Buttons ========================================================================== */ .mc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--mc-space-2); padding:9px 17px;border-radius:var(--mc-radius-sm); font-family:inherit;font-size:var(--mc-text-sm);font-weight:600;letter-spacing:-.01em; border:1px solid transparent;background:transparent;color:var(--mc-text); cursor:pointer;white-space:nowrap;text-decoration:none; transition:background var(--mc-fast) var(--mc-ease),border-color var(--mc-fast) var(--mc-ease), color var(--mc-fast) var(--mc-ease),box-shadow var(--mc-fast) var(--mc-ease); } .mc-btn:hover{text-decoration:none} .mc-btn[disabled],.mc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} .mc-btn--primary{background:var(--mc-blue);color:var(--mc-text-on-accent);border-color:var(--mc-blue)} .mc-btn--primary:hover{background:var(--mc-blue-hover);border-color:var(--mc-blue-hover)} .mc-btn--secondary{border-color:var(--mc-line-strong);color:var(--mc-text)} .mc-btn--secondary:hover{border-color:var(--mc-blue-bright);background:var(--mc-blue-wash)} .mc-btn--subtle{color:var(--mc-text-dim)} .mc-btn--subtle:hover{background:var(--mc-surface-3);color:var(--mc-text)} .mc-btn--danger{background:var(--mc-red-deep);color:var(--mc-text-on-accent);border-color:var(--mc-red-deep)} .mc-btn--danger:hover{background:var(--mc-red-deep-hover);border-color:var(--mc-red-deep-hover)} .mc-btn--pill{border-radius:var(--mc-radius-pill);padding:11px 22px} .mc-btn--sm{padding:6px 12px;font-size:var(--mc-text-xs)} .mc-btn--lg{padding:13px 26px;font-size:var(--mc-text-base)} .mc-btn--block{display:flex;width:100%} .mc-btn-group{display:inline-flex;gap:var(--mc-space-2);flex-wrap:wrap} /* ========================================================================== Forms ========================================================================== */ .mc-field{display:block;margin-bottom:var(--mc-space-4)} .mc-label{ display:block;font-size:var(--mc-text-sm);font-weight:600; color:var(--mc-text);margin-bottom:var(--mc-space-2); } .mc-label .mc-req{color:var(--mc-red-bright);margin-left:2px} .mc-input,.mc-select,.mc-textarea{ width:100%;padding:9px 12px; font-family:inherit;font-size:var(--mc-text-base);line-height:1.45; color:var(--mc-text);background:var(--mc-surface-2); border:1px solid var(--mc-line-strong);border-radius:var(--mc-radius-sm); transition:border-color var(--mc-fast) var(--mc-ease),box-shadow var(--mc-fast) var(--mc-ease); } .mc-input::placeholder,.mc-textarea::placeholder{color:var(--mc-text-faint)} .mc-input:focus,.mc-select:focus,.mc-textarea:focus{ outline:none;border-color:var(--mc-focus);box-shadow:var(--mc-focus-ring); } .mc-input[disabled],.mc-select[disabled],.mc-textarea[disabled]{opacity:.55;cursor:not-allowed} .mc-textarea{min-height:104px;resize:vertical} .mc-select{ appearance:none;padding-right:34px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .mc-help{display:block;font-size:var(--mc-text-xs);color:var(--mc-text-faint);margin-top:var(--mc-space-2)} .mc-error{display:block;font-size:var(--mc-text-xs);color:var(--mc-red-bright);margin-top:var(--mc-space-2)} .mc-field--invalid .mc-input, .mc-field--invalid .mc-select, .mc-field--invalid .mc-textarea{border-color:var(--mc-red)} .mc-check{display:flex;align-items:flex-start;gap:var(--mc-space-3);cursor:pointer;font-size:var(--mc-text-sm);margin-bottom:var(--mc-space-3)} .mc-check input{margin:3px 0 0;accent-color:var(--mc-blue);width:15px;height:15px;flex:none;cursor:pointer} .mc-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--mc-space-4)} /* ========================================================================== Cards & panels ========================================================================== */ .mc-card{ background:var(--mc-surface-2);border:1px solid var(--mc-line); border-radius:var(--mc-radius-md);padding:var(--mc-space-5); } .mc-card--flush{padding:0;overflow:hidden} .mc-card--raised{box-shadow:var(--mc-shadow)} .mc-card__head{ display:flex;align-items:center;gap:var(--mc-space-3);flex-wrap:wrap; padding-bottom:var(--mc-space-4);margin-bottom:var(--mc-space-4); border-bottom:1px solid var(--mc-line); } .mc-card__head > :first-child{margin-right:auto} .mc-card--flush .mc-card__head{padding:var(--mc-space-4) var(--mc-space-5);margin:0} .mc-card__foot{ padding-top:var(--mc-space-4);margin-top:var(--mc-space-4); border-top:1px solid var(--mc-line); display:flex;gap:var(--mc-space-2);flex-wrap:wrap;align-items:center; } .mc-grid{display:grid;gap:var(--mc-space-4)} .mc-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .mc-grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .mc-grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* ========================================================================== Stat tiles ========================================================================== */ .mc-stat{ background:var(--mc-surface-2);border:1px solid var(--mc-line); border-radius:var(--mc-radius-md);padding:var(--mc-space-5); } .mc-stat__label{font-size:var(--mc-text-xs);color:var(--mc-text-dim);letter-spacing:.04em;text-transform:uppercase;font-weight:600} .mc-stat__value{font-size:var(--mc-text-2xl);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:var(--mc-space-3)} .mc-stat__delta{font-size:var(--mc-text-xs);margin-top:var(--mc-space-2);font-family:var(--mc-font-mono)} .mc-stat__delta--up{color:var(--mc-green)} .mc-stat__delta--down{color:var(--mc-red-bright)} .mc-stat__delta--flat{color:var(--mc-text-faint)} /* ========================================================================== Status lights & badges, the channel-marker language ========================================================================== */ .mc-light{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--mc-slate)} .mc-light--live,.mc-light--ok{background:var(--mc-green);box-shadow:0 0 8px var(--mc-green)} .mc-light--warn{background:var(--mc-amber);box-shadow:0 0 8px var(--mc-amber)} .mc-light--err{background:var(--mc-red);box-shadow:0 0 8px var(--mc-red)} .mc-light--idle{background:var(--mc-slate)} .mc-badge{ display:inline-flex;align-items:center;gap:6px; padding:3px 9px;border-radius:var(--mc-radius-sm); font-size:var(--mc-text-xs);font-weight:600;letter-spacing:.01em; background:var(--mc-slate-wash);color:var(--mc-text-dim); border:1px solid transparent; } .mc-badge--ok{background:var(--mc-green-wash);color:var(--mc-green)} .mc-badge--warn{background:var(--mc-amber-wash);color:var(--mc-amber)} .mc-badge--err{background:var(--mc-red-wash);color:var(--mc-red-bright)} .mc-badge--info{background:var(--mc-blue-wash);color:var(--mc-blue-bright)} .mc-badge--mono{font-family:var(--mc-font-mono);font-size:.68rem;letter-spacing:.04em} /* ========================================================================== Alerts ========================================================================== */ .mc-alert{ display:flex;gap:var(--mc-space-3);align-items:flex-start; padding:var(--mc-space-4);border-radius:var(--mc-radius-sm); border:1px solid var(--mc-line-strong);background:var(--mc-surface-2); font-size:var(--mc-text-sm);margin-bottom:var(--mc-space-4); border-left-width:3px; } .mc-alert strong{display:block;margin-bottom:3px} .mc-alert--ok{border-left-color:var(--mc-green);background:var(--mc-green-wash)} .mc-alert--warn{border-left-color:var(--mc-amber);background:var(--mc-amber-wash)} .mc-alert--err{border-left-color:var(--mc-red);background:var(--mc-red-wash)} .mc-alert--info{border-left-color:var(--mc-blue-bright);background:var(--mc-blue-wash)} /* ========================================================================== Tables, the workhorse of every admin screen here ========================================================================== */ .mc-table-wrap{overflow-x:auto;border:1px solid var(--mc-line);border-radius:var(--mc-radius-md);background:var(--mc-surface-2)} .mc-table{width:100%;border-collapse:collapse;font-size:var(--mc-text-sm)} .mc-table th,.mc-table td{padding:11px 14px;text-align:left;vertical-align:middle} .mc-table thead th{ font-size:var(--mc-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--mc-text-dim);background:var(--mc-surface-3); border-bottom:1px solid var(--mc-line-strong);white-space:nowrap; } .mc-table tbody tr{border-top:1px solid var(--mc-line)} .mc-table tbody tr:first-child{border-top:none} .mc-table tbody tr:hover{background:var(--mc-surface-3)} .mc-table td.mc-num,.mc-table th.mc-num{text-align:right;font-family:var(--mc-font-mono);font-variant-numeric:tabular-nums} .mc-table--compact th,.mc-table--compact td{padding:7px 11px} .mc-table--sticky thead th{position:sticky;top:0;z-index:2} /* ========================================================================== Tabs & filter chips ========================================================================== */ .mc-tabs{display:flex;gap:var(--mc-space-1);border-bottom:1px solid var(--mc-line);margin-bottom:var(--mc-space-5);overflow-x:auto} .mc-tab{ padding:10px 15px;background:none;border:none;border-bottom:2px solid transparent; font-family:inherit;font-size:var(--mc-text-sm);font-weight:600;color:var(--mc-text-dim); cursor:pointer;white-space:nowrap;transition:color var(--mc-fast) var(--mc-ease),border-color var(--mc-fast) var(--mc-ease); } .mc-tab:hover{color:var(--mc-text)} .mc-tab[aria-selected="true"],.mc-tab.is-active{color:var(--mc-text);border-bottom-color:var(--mc-blue-bright)} .mc-chip{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:var(--mc-radius-pill); border:1px solid var(--mc-line-strong);background:transparent;color:var(--mc-text-dim); font-family:inherit;font-size:var(--mc-text-sm);font-weight:600;cursor:pointer; transition:all var(--mc-fast) var(--mc-ease); } .mc-chip:hover{color:var(--mc-text);border-color:var(--mc-blue-bright)} .mc-chip[aria-pressed="true"],.mc-chip.is-active{background:var(--mc-surface-3);color:var(--mc-text);border-color:var(--mc-blue-bright)} /* ========================================================================== Theme toggle Pairs with mc-theme.js. Markup: The icon is drawn from the button's own aria-pressed state, which the script maintains, so there is nothing per-app to keep in sync. ========================================================================== */ .mc-theme__icon{ display:inline-block;width:1em;height:1em;margin-right:6px; vertical-align:-.12em;border-radius:50%; background:currentColor; /* Crescent, punched out with a disc the colour of the bar behind it. This is the dark state, so the button offers the moon while dark is active. */ box-shadow:inset .32em -.32em 0 0 var(--mc-surface); transition:box-shadow var(--mc-fast) var(--mc-ease),transform var(--mc-fast) var(--mc-ease); } /* aria-pressed=true means light is active, so show a sun instead. */ [data-mc-theme][aria-pressed="true"] .mc-theme__icon{ box-shadow:0 0 0 .1em var(--mc-surface),0 0 0 .18em currentColor; transform:scale(.66); } /* ========================================================================== Empty state ========================================================================== */ .mc-empty{ text-align:center;padding:var(--mc-space-8) var(--mc-space-5); border:1px dashed var(--mc-line-strong);border-radius:var(--mc-radius-md);color:var(--mc-text-dim); } .mc-empty h3{color:var(--mc-text);margin:0 0 var(--mc-space-2)} .mc-empty p{margin:0 auto var(--mc-space-5);max-width:44ch;font-size:var(--mc-text-sm)} /* ========================================================================== App shell, topbar + sidebar. Used by every authenticated Main Channel app. ========================================================================== */ .mc-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--mc-bg)} .mc-topbar{ position:sticky;top:0;z-index:50;height:var(--mc-topbar-h);flex:none; display:flex;align-items:center;gap:var(--mc-space-4); padding:0 var(--mc-space-5); background:var(--mc-surface);border-bottom:1px solid var(--mc-line); } .mc-topbar__brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;color:var(--mc-text);text-decoration:none} .mc-topbar__brand:hover{text-decoration:none} .mc-topbar__brand svg,.mc-topbar__brand img{width:28px;height:28px;flex:none} .mc-topbar__app{ padding-left:var(--mc-space-4);margin-left:var(--mc-space-1); border-left:1px solid var(--mc-line-strong); font-size:var(--mc-text-sm);color:var(--mc-text-dim);font-weight:600; } .mc-topbar__spacer{margin-left:auto} .mc-body{display:flex;flex:1;min-height:0} .mc-sidebar{ width:var(--mc-sidebar-w);flex:none;padding:var(--mc-space-5) var(--mc-space-3); background:var(--mc-surface);border-right:1px solid var(--mc-line);overflow-y:auto; } .mc-sidebar__group{margin-bottom:var(--mc-space-5)} .mc-sidebar__title{ font-size:var(--mc-text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--mc-text-faint);padding:0 var(--mc-space-3);margin-bottom:var(--mc-space-2); } .mc-navlink{ display:flex;align-items:center;gap:var(--mc-space-3); padding:8px var(--mc-space-3);border-radius:var(--mc-radius-sm); font-size:var(--mc-text-sm);color:var(--mc-text-dim);text-decoration:none; transition:background var(--mc-fast) var(--mc-ease),color var(--mc-fast) var(--mc-ease); } .mc-navlink:hover{background:var(--mc-surface-3);color:var(--mc-text);text-decoration:none} .mc-navlink.is-active{background:var(--mc-blue-wash);color:var(--mc-blue-bright);font-weight:600} .mc-main{flex:1;min-width:0;padding:var(--mc-space-6) var(--mc-space-5)} @media (max-width:860px){ .mc-body{flex-direction:column} .mc-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--mc-line);padding:var(--mc-space-3)} .mc-sidebar__group{margin-bottom:var(--mc-space-3)} .mc-main{padding:var(--mc-space-5) var(--mc-space-4)} } /* ========================================================================== Auth screen, several Main Channel apps have their own login ========================================================================== */ .mc-auth{min-height:100vh;display:grid;place-items:center;padding:var(--mc-space-5);background:var(--mc-bg)} .mc-auth__card{ width:100%;max-width:392px;background:var(--mc-surface-2); border:1px solid var(--mc-line);border-radius:var(--mc-radius-lg); padding:var(--mc-space-6);box-shadow:var(--mc-shadow-lg); } .mc-auth__brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:var(--mc-space-5);font-weight:700} .mc-auth__brand svg,.mc-auth__brand img{width:32px;height:32px} .mc-auth__title{text-align:center;margin-bottom:var(--mc-space-5)} .mc-auth__title p{margin:var(--mc-space-2) 0 0;font-size:var(--mc-text-sm);color:var(--mc-text-dim)} .mc-auth__foot{margin-top:var(--mc-space-5);text-align:center;font-size:var(--mc-text-xs);color:var(--mc-text-faint)} /* ========================================================================== Small utilities, deliberately few ========================================================================== */ .mc-row{display:flex;gap:var(--mc-space-3);align-items:center;flex-wrap:wrap} .mc-row--between{justify-content:space-between} .mc-stack > * + *{margin-top:var(--mc-space-4)} .mc-stack--tight > * + *{margin-top:var(--mc-space-2)} .mc-hr{border:none;border-top:1px solid var(--mc-line);margin:var(--mc-space-5) 0} .mc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ [class^="mc-"],[class*=" mc-"]{transition-duration:.001ms!important;animation-duration:.001ms!important} }