Bryan Gilliom (via Claude)
2209a19eb7
First test run (Oshkosh GO Transit internal kickoff, via the actual
installed skill, not Claude manually walking the SKILL.md) surfaced real,
fixable gaps. All fixed here:
1. Print CSS bug (root cause, found by Bryan): section{break-inside:
avoid-page} plus whole-table break-inside:avoid caused a 14-page,
mostly-blank PDF. Fixed: sections can split across pages now; only
cards/table-rows avoid splitting, with repeating table headers.
2. SO/PO lookup was wrongly scoped out of this brief type by default.
Wrong -- an internal kickoff about a real sale needs the SO/PO as much
as any external brief would. Scope is now by topic nature (commercial
vs. purely internal), not by brief-type name.
3. Contact-info lookup (not just name resolution) is now an explicit
standing step in attendee capture, starting from a linked SO/PO's own
Odoo contacts when one exists.
4. Added the MPM Technical Reference System (a 131-file Drive registry:
brand, platform, display tech, products, engineering, concepts, proof)
as a standing reference for part-number/product verification --
previously unknown to this skill.
5. Pulled the real run's improved _topic-state.md schema back into the
spec: confidence tags (verified/stated/open), a folder-layout header,
numbered-vs-proposed open items, a Findings/flags section. These
emerged from real use and are now documented, not one-off.
6. Meeting transcript archival (a Meeting Transcripts/ subfolder) is now
a standing step, not something that has to be asked for.
7. section-structure.md: flow and specbar are now marked validated (real
examples: Oshkosh deployment sequence, billing milestones). Added the
meeting-vs-proposed open-items badge pattern and a standard
confidentiality footer note for this brief type.
None of this was a failure of judgment in the moment -- these are gaps
between what the file said and what real use needed, now closed.
238 lines
13 KiB
CSS
238 lines
13 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, .note, .colcard, .spec{
|
|
break-inside:avoid;
|
|
}
|
|
table.unitgrid tr, table.actions tr{break-inside:avoid;}
|
|
table.unitgrid thead, table.actions thead{display:table-header-group;}
|
|
a{color:inherit; text-decoration:none;}
|
|
}
|