Bryan Gilliom (via Claude)
c98daed984
Real-tested 2026-09-21 against the APTA 2026 booth 09-16 planning meeting (recap mode). Includes: - skills/internal-meeting-brief/SKILL.md — full workflow: topic resolution, continuity manifest, agenda/recap branching, attendee capture/normalization, scoped data pulls, synthesis, render, archive. - assets/brief-components.css — canonical shared component library (cards, flow, layerbox/filepill, unitgrid, quad, compare, specbar, actions+status pills, note callouts x4 tones, colvis/ring), MPM tokens from CW-028, required light/dark toggle, print rules. - references/section-structure.md — fixed-vs-dynamic section contract, explicitly marked unproven beyond one real run. Known limitation: Plaud MCP connector is currently non-functional (local server via Claude Desktop, times out). Brief was built from a manually uploaded transcript, not a live pull. Five more skills planned, not started: vendor-partner-brief, status-update-brief, five-whys-brief, kickoff-brief, development-brief. Full design history in CW-027's Concept.md (Drive).
237 lines
12 KiB
CSS
237 lines
12 KiB
CSS
/* ==========================================================================
|
|
Brief — shared component library (CW-027)
|
|
Canonical CSS for all Brief skills. Do not fork per-brief — edit here.
|
|
|
|
Design tokens sourced from CW-028 (@jason/ui-kit, src/lib/tokens.json).
|
|
Light theme is default; dark theme via [data-theme="dark"]; print always
|
|
forces light regardless of the on-screen toggle state.
|
|
|
|
Re-pull tokens from git.alwisp.com/jason/ui-kit at each Brief release in
|
|
case Jason has updated them — see CW-027 Concept.md, "Design system
|
|
source of truth."
|
|
========================================================================== */
|
|
|
|
:root{
|
|
--bg:#FAF8F4; --surface:#FFFFFF; --surface-2:#F4F0EA; --border:#DED8D1;
|
|
--text:#272326; --muted:#665F62;
|
|
--brand:#79640E; --brand-bright:#665308; --brand-dark:#5C4B07; --brand-fg:#FFFFFF;
|
|
--success:#217A4A; --success-fg:#FFFFFF;
|
|
--warning:#7A5B00; --warning-fg:#FFFFFF;
|
|
--danger:#A42D20; --danger-fg:#FFFFFF;
|
|
--info:#366B99; --info-fg:#FFFFFF;
|
|
|
|
--radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
|
|
--shadow-sm:0 1px 2px 0 rgb(20 16 18 / .10);
|
|
--shadow-md:0 4px 12px -2px rgb(20 16 18 / .14), 0 2px 4px -2px rgb(20 16 18 / .10);
|
|
--shadow-lg:0 12px 32px -8px rgb(20 16 18 / .20), 0 4px 8px -4px rgb(20 16 18 / .12);
|
|
--shadow-glow:0 0 0 1px rgb(121 100 14 / .18), 0 8px 28px -6px rgb(121 100 14 / .20);
|
|
--ease-out:cubic-bezier(0.22,1,0.36,1);
|
|
--dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
|
|
}
|
|
[data-theme="dark"]{
|
|
--bg:#232022; --surface:#2B282A; --surface-2:#333031; --border:#3A3638;
|
|
--text:#F5F1EC; --muted:#A99F97;
|
|
--brand:#DCBB4F; --brand-bright:#F5CD15; --brand-dark:#998643; --brand-fg:#232022;
|
|
--success:#62C890; --success-fg:#232022;
|
|
--warning:#E4C85B; --warning-fg:#232022;
|
|
--danger:#D76F4A; --danger-fg:#232022;
|
|
--info:#76A9D6; --info-fg:#232022;
|
|
--shadow-glow:0 0 0 1px rgb(220 187 79 / .20), 0 8px 28px -6px rgb(220 187 79 / .28);
|
|
}
|
|
|
|
/* Fonts: production should self-host from CW-001's assets/fonts/*.ttf.
|
|
This @import is a portability fallback for previewing outside that
|
|
pipeline — swap it for local <link>/@font-face at publish time. */
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&family=JetBrains+Mono:wght@500&display=swap');
|
|
|
|
*{box-sizing:border-box;}
|
|
body{
|
|
margin:0; background:var(--bg); color:var(--text);
|
|
font-family:"Open Sans",system-ui,sans-serif; line-height:1.55;
|
|
transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
|
|
}
|
|
h1,h2,h3,h4{font-family:"Montserrat",system-ui,sans-serif;}
|
|
code,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;}
|
|
|
|
/* ---- Header ---- */
|
|
header{
|
|
background:linear-gradient(135deg, var(--brand-dark), var(--brand));
|
|
color:#fff; padding:32px 6vw 26px; position:relative;
|
|
}
|
|
[data-theme="dark"] header{background:linear-gradient(135deg,#3a2f08,var(--brand-dark));}
|
|
header .wordmark{
|
|
display:inline-flex; align-items:center; gap:8px; font-family:"Montserrat";
|
|
font-weight:700; font-size:15px; letter-spacing:1px; opacity:.9; margin-bottom:10px;
|
|
}
|
|
header .wordmark .dot{width:8px; height:8px; border-radius:50%; background:#fff;}
|
|
header .eyebrow{font-size:12.5px; letter-spacing:2px; text-transform:uppercase; opacity:.8;}
|
|
header h1{margin:8px 0 4px; font-size:26px; font-weight:700; max-width:860px;}
|
|
header .meta{margin-top:12px; font-size:13px; opacity:.9; display:flex; flex-wrap:wrap; gap:18px;}
|
|
header .meta b{font-weight:600;}
|
|
.theme-toggle{
|
|
position:absolute; top:28px; right:6vw; background:rgba(255,255,255,.16);
|
|
border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px;
|
|
padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
|
|
transition:background var(--dur-fast) var(--ease-out);
|
|
}
|
|
.theme-toggle:hover{background:rgba(255,255,255,.28);}
|
|
|
|
/* ---- Sticky jump-nav ---- */
|
|
nav.toc{
|
|
background:var(--surface); border-bottom:1px solid var(--border);
|
|
padding:10px 6vw; display:flex; flex-wrap:wrap; gap:6px 16px;
|
|
position:sticky; top:0; z-index:50; font-size:12.5px;
|
|
}
|
|
nav.toc a{color:var(--brand); text-decoration:none; white-space:nowrap; font-weight:600;}
|
|
nav.toc a:hover{text-decoration:underline;}
|
|
|
|
/* ---- Layout & section rhythm ---- */
|
|
main{padding:26px 6vw 60px; max-width:1180px; margin:0 auto;}
|
|
section{margin-bottom:42px;}
|
|
section > .sechead{
|
|
display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
|
|
border-bottom:3px solid var(--brand); padding-bottom:8px;
|
|
}
|
|
.secnum{
|
|
background:var(--brand); color:var(--brand-fg); font-weight:700; font-size:14px;
|
|
width:28px; height:28px; border-radius:var(--radius-sm); display:flex;
|
|
align-items:center; justify-content:center; flex-shrink:0;
|
|
}
|
|
.sechead h2{margin:0; font-size:19px; color:var(--text);}
|
|
.sechead .sub{font-size:12px; font-weight:400; color:var(--muted); margin-left:4px;}
|
|
.sec-note{font-size:13px; color:var(--muted); margin:8px 0 14px; max-width:75ch;}
|
|
|
|
/* ---- Cards (c2/c3/c4/c5 densities) ---- */
|
|
.cards{display:grid; gap:14px;}
|
|
.cards.c2{grid-template-columns:repeat(2,1fr);}
|
|
.cards.c3{grid-template-columns:repeat(3,1fr);}
|
|
.cards.c4{grid-template-columns:repeat(4,1fr);}
|
|
.cards.c5{grid-template-columns:repeat(5,1fr);}
|
|
@media(max-width:900px){.cards.c3,.cards.c4,.cards.c5{grid-template-columns:1fr 1fr;}}
|
|
@media(max-width:600px){.cards.c2,.cards.c3,.cards.c4,.cards.c5{grid-template-columns:1fr;}}
|
|
.card{
|
|
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
|
|
padding:16px; box-shadow:var(--shadow-sm);
|
|
transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
|
|
}
|
|
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
|
|
.card h3{margin:0 0 6px; font-size:14.5px; color:var(--text);}
|
|
.card p{margin:6px 0; font-size:13px; color:var(--muted);}
|
|
.icon{
|
|
width:36px; height:36px; border-radius:var(--radius-sm); display:flex;
|
|
align-items:center; justify-content:center; color:#fff; font-size:17px;
|
|
font-weight:700; margin-bottom:8px;
|
|
}
|
|
.sensorgrid .card{text-align:center;}
|
|
.sensorgrid .icon{margin:0 auto 8px;}
|
|
|
|
/* ---- Flow (sequential process) ---- */
|
|
.flow{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;}
|
|
.flow .step{flex:1; min-width:160px;}
|
|
.flow .arrow{align-self:center; font-size:20px; color:var(--muted); padding:0 2px;}
|
|
|
|
/* ---- Layerbox + filepill (tiered component grouping) ---- */
|
|
.layerbox{border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:12px; border:2px solid var(--border);}
|
|
.layer-base{background:color-mix(in srgb, var(--info) 8%, var(--surface)); border-color:var(--info);}
|
|
.layer-ext{background:color-mix(in srgb, var(--warning) 10%, var(--surface)); border-style:dashed; border-color:var(--warning);}
|
|
.layerbox .tag{
|
|
display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px;
|
|
padding:2px 9px; border-radius:999px; color:#fff; margin-bottom:8px;
|
|
}
|
|
.tag-base{background:var(--info);} .tag-ext{background:var(--warning); color:var(--text);}
|
|
.filepill{
|
|
display:inline-flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
|
|
border-radius:var(--radius-sm); padding:8px 12px; margin:4px 8px 4px 0; font-size:12.5px; min-width:160px;
|
|
}
|
|
.filepill b{font-size:13px; color:var(--text);}
|
|
.filepill span{color:var(--muted);}
|
|
|
|
/* ---- Unitgrid (spec/comparison matrix) ---- */
|
|
table.unitgrid{border-collapse:collapse; width:100%; margin-top:10px; font-size:12.5px;}
|
|
table.unitgrid th, table.unitgrid td{border:1px solid var(--border); padding:8px 10px; text-align:center;}
|
|
table.unitgrid th{background:var(--text); color:var(--bg); font-weight:600;}
|
|
table.unitgrid td.yes{color:var(--success); font-weight:700;}
|
|
table.unitgrid td.no{color:var(--muted);}
|
|
table.unitgrid td:first-child{text-align:left; font-weight:600;}
|
|
|
|
/* ---- Quad (2x2 flagship callouts) ---- */
|
|
.quad{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
|
|
@media(max-width:700px){.quad{grid-template-columns:1fr;}}
|
|
.quadcard{
|
|
border-radius:var(--radius-md); padding:14px 16px; background:var(--surface);
|
|
border:1px solid var(--border); border-left-width:5px; border-left-style:solid;
|
|
}
|
|
.q-1{border-left-color:var(--info);}
|
|
.q-2{border-left-color:var(--warning);}
|
|
.q-3{border-left-color:var(--danger);}
|
|
.q-4{border-left-color:var(--success);}
|
|
.quadcard h4{margin:0 0 6px; font-size:13.5px; color:var(--text);}
|
|
.quadcard p{font-size:12.5px; margin:4px 0; color:var(--muted);}
|
|
|
|
/* ---- Compare (two-column contrast) ---- */
|
|
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
|
|
@media(max-width:700px){.compare{grid-template-columns:1fr;}}
|
|
.compare .col{border-radius:var(--radius-md); padding:14px 16px; border:1px solid var(--border);}
|
|
.col-a{background:color-mix(in srgb, var(--info) 8%, var(--surface));}
|
|
.col-b{background:color-mix(in srgb, var(--brand) 8%, var(--surface));}
|
|
.compare h3{margin-top:0; font-size:14px;}
|
|
.compare ul{margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted);}
|
|
.compare li{margin-bottom:8px;}
|
|
|
|
/* ---- Specbar (stat cards) ---- */
|
|
.specbar{display:flex; flex-wrap:wrap; gap:14px;}
|
|
.spec{flex:1; min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;}
|
|
.spec .val{font-size:22px; font-weight:700; color:var(--brand); font-family:"Montserrat";}
|
|
.spec .lbl{font-size:11.5px; color:var(--muted); margin-top:2px;}
|
|
|
|
/* ---- Actions table + status pills ---- */
|
|
table.actions{border-collapse:collapse; width:100%; font-size:12.5px;}
|
|
table.actions th{background:var(--text); color:var(--bg); padding:8px 10px; text-align:left; font-weight:600;}
|
|
table.actions td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text);}
|
|
table.actions tr:nth-child(even) td{background:var(--surface-2);}
|
|
.status{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap;}
|
|
.status.info{background:var(--info); color:var(--info-fg);}
|
|
.status.warn{background:var(--warning); color:var(--warning-fg);}
|
|
.status.danger{background:var(--danger); color:var(--danger-fg);}
|
|
.status.success{background:var(--success); color:var(--success-fg);}
|
|
.status.muted{background:var(--muted); color:var(--surface);}
|
|
|
|
/* ---- Note callouts (4 semantic tones) ---- */
|
|
.note{border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; border-left:4px solid; margin-bottom:10px;}
|
|
.note.info{background:color-mix(in srgb, var(--info) 10%, var(--surface)); border-color:var(--info);}
|
|
.note.warn{background:color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color:var(--warning);}
|
|
.note.danger{background:color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color:var(--danger);}
|
|
.note.success{background:color-mix(in srgb, var(--success) 10%, var(--surface)); border-color:var(--success);}
|
|
.note b{color:var(--text);}
|
|
|
|
/* ---- Colvis / conic-gradient ring (space/percentage allocation) ---- */
|
|
.colvis{display:flex; gap:16px; flex-wrap:wrap; align-items:stretch;}
|
|
.colvis .colcard{flex:1; min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; text-align:center;}
|
|
.colvis .ring{
|
|
width:110px; height:110px; border-radius:50%; margin:0 auto 10px; position:relative;
|
|
display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); font-size:12.5px;
|
|
}
|
|
.ring-main{background:conic-gradient(var(--brand) 0 35%, var(--info) 35% 65%, var(--warning) 65% 100%);}
|
|
.ring-main::after{content:""; position:absolute; width:68px; height:68px; background:var(--surface); border-radius:50%;}
|
|
.colvis .ring span{position:relative; z-index:2;}
|
|
.legend{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:11px; margin-top:6px; color:var(--muted);}
|
|
.legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px;}
|
|
|
|
/* ---- Footer ---- */
|
|
footer{padding:22px 6vw; color:var(--muted); font-size:11.5px; text-align:center; border-top:1px solid var(--border); margin-top:20px;}
|
|
|
|
/* ==========================================================================
|
|
PRINT — always light, no chrome, avoid awkward breaks.
|
|
PDF generation at publish time should render this media state.
|
|
========================================================================== */
|
|
@media print{
|
|
.theme-toggle, nav.toc{display:none !important;}
|
|
body{background:#FAF8F4 !important; color:#272326 !important;}
|
|
header{background:#79640E !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
|
|
.card, .quadcard, .layerbox, .filepill, table.unitgrid, table.actions, .note, .colcard, .spec{
|
|
break-inside:avoid;
|
|
}
|
|
section{break-inside:avoid-page;}
|
|
a{color:inherit; text-decoration:none;}
|
|
}
|