/* ServiceBridge — Timeline Planning · inline style objects */
window.sbStyles = {
  /* wordmark */
  wordmark:   { display: 'flex', alignItems: 'center', gap: 9, color: '#fff', fontSize: 17, letterSpacing: '.2px' },
  glyph:      { width: 30, height: 30, borderRadius: 7, background: 'rgba(9,176,237,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' },

  /* owner badge */
  owner:      { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'rgba(0,0,0,.65)' },
  ownerDot:   { width: 7, height: 7, borderRadius: '50%', flexShrink: 0 },

  /* section frame */
  frame:        { marginBottom: 20 },
  frameHead:    { display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 14px' },
  frameBadge:   { width: 34, height: 34, borderRadius: 8, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 16, flexShrink: 0 },
  frameBar:     { width: 4, alignSelf: 'stretch', minHeight: 34, borderRadius: 3, flexShrink: 0 },
  frameContainer: { background: '#fff', border: '1px solid #e8eef4', borderRadius: 12, padding: '20px 20px 16px' },
  frameTitle:   { fontSize: 18, fontWeight: 600, color: '#142E47', lineHeight: 1.2 },
  frameCaption: { fontSize: 13, color: 'rgba(0,0,0,.5)', marginTop: 2 },

  /* legend */
  legend:     { display: 'flex', flexWrap: 'wrap', gap: '8px 22px', padding: '12px 16px', background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, marginBottom: 20, fontSize: 13 },
  legendItem: { display: 'flex', alignItems: 'center', gap: 8 },
  swatch:     { width: 14, height: 14, borderRadius: 4, flexShrink: 0 },
  swatchSm:   { width: 9, height: 9, borderRadius: 2, display: 'inline-block', flexShrink: 0 },

  /* hero */
  hero:       { background: 'linear-gradient(135deg,#142E47 0%,#1b3d5e 100%)', borderRadius: 12, padding: '34px 40px 30px', color: '#fff', marginBottom: 20, position: 'relative', overflow: 'hidden' },
  heroTop:    { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 },
  heroLiving: { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'rgba(255,255,255,.75)', background: 'rgba(255,255,255,.08)', padding: '5px 12px', borderRadius: 20, border: '1px solid rgba(255,255,255,.12)' },
  livingDot:  { width: 7, height: 7, borderRadius: '50%', background: '#52c41a', boxShadow: '0 0 0 3px rgba(82,196,26,.25)' },
  heroKicker: { fontSize: 13, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#56cdf2' },
  heroTitle:  { fontSize: 40, fontWeight: 600, color: '#fff', margin: '6px 0 10px', lineHeight: 1.1 },
  heroSub:    { fontSize: 15.5, color: 'rgba(255,255,255,.72)', maxWidth: 680, margin: 0, lineHeight: 1.55 },
  metaRow:    { display: 'flex', gap: 40, marginTop: 26, flexWrap: 'wrap' },
  metaItem:   {},
  metaLabel:  { fontSize: 11.5, letterSpacing: '.6px', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)' },
  metaValue:  { fontSize: 15, fontWeight: 500, color: '#fff', marginTop: 3 },

  /* overview */
  scopeGrid:  { display: 'grid', gridTemplateColumns: '1fr 300px', gap: 32, alignItems: 'start' },
  scopeCols:  { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 18 },
  scopeColHead: { display: 'flex', alignItems: 'center', gap: 8, fontWeight: 600, color: '#142E47', marginBottom: 8, fontSize: 14 },
  scopeList:  { margin: 0, paddingLeft: 18, color: 'rgba(0,0,0,.65)', lineHeight: 1.9, fontSize: 13.5 },
  statsCol:   { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 },
  statsRow:   { display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 18 },
  statBox:    { flex: '1 1 180px', background: '#f7fafd', border: '1px solid #eef3f8', borderRadius: 8, padding: '16px 16px 14px' },

  /* table extras */
  tGroup:      { marginBottom: 22 },
  groupDivider:{ height: 1, background: '#dde6ef', margin: '6px 0 22px' },
  tGroupHead:  { display: 'flex', alignItems: 'center', gap: 12, padding: '0 2px 10px' },
  tGroupBar:   { width: 4, height: 18, borderRadius: 2, flexShrink: 0 },
  tGroupLabel: { fontSize: 15, fontWeight: 700, color: '#142E47' },
  tGroupCount: { fontSize: 11.5, fontWeight: 600, color: '#275C8D', background: '#e6f4fb', padding: '2px 9px', borderRadius: 12, whiteSpace: 'nowrap' },
  tGroupCap:   { flex: 1, fontSize: 12.5, color: 'rgba(0,0,0,.45)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
  tGroupSub:   { fontSize: 14, fontWeight: 700, color: '#142E47', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },
  subTotals:   { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginTop: 10, padding: '9px 14px', background: '#fafcfe', border: '1px solid #eef3f8', borderRadius: 8, fontSize: 12.5 },
  tScroll:     { overflowX: 'auto' },

  /* sign-off (design done / dev done) */
  soCell:      { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 },
  soBox:       { width: 20, height: 20, borderRadius: 5, border: '1.5px solid #d9d9d9', background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0, transition: 'all .15s' },
  soTs:        { fontSize: 11, color: 'rgba(0,0,0,.55)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', lineHeight: 1.2 },
  soEmpty:     { color: 'rgba(0,0,0,.2)' },
  soProgress:  { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 16, padding: '10px 14px', background: '#f7fafd', border: '1px solid #eef3f8', borderRadius: 8 },
  soHint:      { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'rgba(0,0,0,.55)' },
  soPill:      { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: '#142E47', background: '#fff', border: '1px solid #eef0f2', borderRadius: 20, padding: '5px 12px' },
  soPillBar:   { width: 64, height: 6, borderRadius: 4, background: '#eef3f8', overflow: 'hidden' },
  soPillFill:  { height: '100%', borderRadius: 4, transition: 'width .3s' },

  /* Start action column */
  startedTag:  { fontSize: 12, fontWeight: 600, color: '#688DAF' },
  startDone:   { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600, color: '#389e0d' },

  /* per-phase completion checkbox + day count */
  phaseCell:   { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 },
  phaseCellWrap: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 },
  phaseActual: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 10.5, color: 'rgba(0,0,0,.5)', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', lineHeight: 1.2 },
  phaseElapsed:{ fontWeight: 700, color: '#389e0d', fontVariantNumeric: 'tabular-nums' },
  phaseBox:    { width: 16, height: 16, borderRadius: 4, border: '1.5px solid #d9d9d9', background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'all .15s' },
  phaseBoxOn:  { background: '#52c41a', border: '1.5px solid #52c41a' },

  /* calendar (Option C) */
  calWrap:      { display: 'flex', gap: 18, alignItems: 'flex-start', flexWrap: 'wrap' },
  calMain:      { flex: 1, minWidth: 520, background: '#fff', border: '1px solid #f0f0f0', borderRadius: 10, padding: 16 },
  calHead:      { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 14, flexWrap: 'wrap' },
  calNav:       { display: 'flex', alignItems: 'center', gap: 4 },
  calNavBtn:    { width: 30, height: 30, borderRadius: 8, border: '1px solid #d9d9d9', background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#142E47' },
  calNavOff:    { opacity: 0.35, cursor: 'not-allowed' },
  calTitle:     { fontSize: 17, fontWeight: 700, color: '#142E47', minWidth: 132, textAlign: 'center' },
  calMonthTabs: { display: 'flex', gap: 4 },
  calMtab:      { padding: '5px 10px', borderRadius: 7, border: '1px solid #eef0f2', background: '#fff', color: 'rgba(0,0,0,.6)', fontSize: 12, fontWeight: 600, cursor: 'pointer' },
  calMtabOn:    { background: '#142E47', borderColor: '#142E47', color: '#fff' },
  calGrid:      { display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0, 1fr))', gap: 6 },
  calDow:       { textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'rgba(0,0,0,.4)', padding: '2px 0 4px', textTransform: 'uppercase', letterSpacing: '.5px' },
  calCell:      { minHeight: 92, minWidth: 0, border: '1px solid #f0f3f7', borderRadius: 8, padding: 6, display: 'flex', flexDirection: 'column', gap: 4, background: '#fff' },
  calCellMuted: { background: '#fafbfc' },
  calCellEmpty: { border: '1px solid transparent', background: 'transparent', minHeight: 92 },
  calToday:     { boxShadow: 'inset 0 0 0 2px #09B0ED', borderColor: 'transparent' },
  calDayNum:    { fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,.5)' },
  calTodayNum:  { color: '#09B0ED' },
  calTodayTag:  { fontSize: 9.5, fontWeight: 700, color: '#09B0ED', textTransform: 'uppercase', letterSpacing: '.5px' },
  calChip:      { display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, lineHeight: 1.2, padding: '4px 6px', borderRadius: 5, cursor: 'pointer', background: '#f6f9fc', overflow: 'hidden' },
  calChipName:  { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500, color: '#142E47' },
  calDot:       { width: 9, height: 9, borderRadius: '50%', flexShrink: 0, display: 'inline-block' },

  calSide:      { width: 320, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 14 },
  calCard:      { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 10, padding: 16 },
  calCardTitle: { fontSize: 14, fontWeight: 700, color: '#142E47', marginBottom: 10 },
  calCollapseHead: { display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', userSelect: 'none' },
  calCollapseTitle: { fontSize: 14, fontWeight: 700, color: '#142E47' },
  calSub:       { fontSize: 11.5, color: 'rgba(0,0,0,.45)', marginTop: -6, marginBottom: 12, lineHeight: 1.45 },
  calLegend:    { display: 'flex', flexDirection: 'column', gap: 8 },
  calLegendItem:{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'rgba(0,0,0,.7)' },
  calSecHead:   { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 700, color: '#142E47', margin: '12px 0 7px', textTransform: 'uppercase', letterSpacing: '.4px' },
  calSecCount:  { marginLeft: 'auto', fontSize: 11.5, fontWeight: 600, color: '#275C8D', background: '#e6f4fb', padding: '1px 8px', borderRadius: 10 },
  calItem:      { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '8px 10px', border: '1px solid #eef0f2', borderRadius: 7, cursor: 'pointer', marginBottom: 6 },
  calItemName:  { fontSize: 12.5, fontWeight: 500, color: '#142E47', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
  calItemMeta:  { textAlign: 'right', flexShrink: 0 },
  calItemVerb:  { fontSize: 10, fontWeight: 600, color: 'rgba(0,0,0,.4)', textTransform: 'uppercase', letterSpacing: '.3px', whiteSpace: 'nowrap' },
  calItemDate:  { fontSize: 12, fontWeight: 600, color: '#142E47', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', marginTop: 1 },
  calBack:      { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: '#275C8D', cursor: 'pointer', marginBottom: 12 },
  calBanner:    { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, color: '#fff', fontSize: 12.5, fontWeight: 500 },
  calMile:      { display: 'flex', gap: 10, padding: '9px 10px', borderRadius: 8, alignItems: 'flex-start' },
  calMileActive:{ background: '#f6f9fc' },
  calMileDate:  { fontSize: 12, color: 'rgba(0,0,0,.5)', marginTop: 1, fontVariantNumeric: 'tabular-nums' },
  calMileBadge: { fontSize: 11, fontWeight: 600, color: '#389e0d', background: '#f6ffed', border: '1px solid #b7eb8f', padding: '1px 7px', borderRadius: 10, whiteSpace: 'nowrap' },
  calNote:      { marginTop: 12, paddingTop: 12, borderTop: '1px solid #f4f4f4', fontSize: 12.5, color: 'rgba(0,0,0,.55)', lineHeight: 1.55 },
  estHead:    { display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' },
  estCell:    { fontVariantNumeric: 'tabular-nums', fontWeight: 500 },
  estUnit:    { color: 'rgba(0,0,0,.35)', fontSize: 12, marginLeft: 2 },
  rowNum:     { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 22, height: 22, borderRadius: 6, background: '#f0f5fa', color: '#275C8D', fontSize: 12, fontWeight: 600, flexShrink: 0 },
  rowNote:    { fontSize: 12.5, color: 'rgba(0,0,0,.45)', marginTop: 4, marginLeft: 30, lineHeight: 1.5, maxWidth: 360 },
  holdNote:   { display: 'flex', flexDirection: 'column', gap: 3, marginTop: 7, marginLeft: 30, maxWidth: 360, fontSize: 12, lineHeight: 1.45, color: '#8a5300', background: '#fff7e6', border: '1px solid #ffe1a8', borderRadius: 6, padding: '7px 10px' },
  holdNoteLabel: { fontWeight: 700, color: '#d46b08', textTransform: 'uppercase', fontSize: 10, letterSpacing: '.5px', whiteSpace: 'nowrap' },
  holdNoteStatus: { display: 'flex', flexDirection: 'column', gap: 3, marginTop: 2, fontSize: 11.5, lineHeight: 1.45, color: '#8a5300', background: '#fff7e6', border: '1px solid #ffe1a8', borderRadius: 6, padding: '7px 9px' },

  /* figma / design links cell */
  linksWrap:   { display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'flex-start' },
  linkChip:    { display: 'flex', alignItems: 'center', gap: 2, maxWidth: '100%' },
  linkChipA:   { display: 'inline-flex', alignItems: 'center', gap: 6, background: '#eef7fd', border: '1px solid #cfe8f9', color: '#0b6aa2', borderRadius: 6, padding: '3px 8px', fontSize: 12, fontWeight: 500, textDecoration: 'none', maxWidth: 156, overflow: 'hidden' },
  linkChipDot: { width: 6, height: 6, borderRadius: '50%', background: '#09B0ED', flexShrink: 0 },
  linkChipName:{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
  linkEdit:    { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 22, height: 22, border: 'none', background: 'transparent', color: 'rgba(0,0,0,.35)', cursor: 'pointer', borderRadius: 5, flexShrink: 0 },
  linkAdd:     { display: 'inline-flex', alignItems: 'center', gap: 5, border: '1px dashed #c4d2e0', background: 'transparent', color: 'rgba(0,0,0,.5)', borderRadius: 6, padding: '3px 9px', fontSize: 12, cursor: 'pointer', fontWeight: 500 },
  linkForm:    { display: 'flex', flexDirection: 'column', gap: 6 },
  linkInput:   { width: '100%', boxSizing: 'border-box', border: '1px solid #d6e0ea', borderRadius: 6, padding: '5px 8px', fontSize: 12, fontFamily: 'inherit', outline: 'none' },
  linkFormBtns:{ display: 'flex', alignItems: 'center', gap: 6 },
  linkDel:     { border: 'none', background: 'transparent', color: '#cf3b3b', fontSize: 12, cursor: 'pointer', marginLeft: 'auto', padding: '2px 4px' },
  totalCell:  { fontWeight: 700, color: '#142E47', fontVariantNumeric: 'tabular-nums' },
  totalsBar:  { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginTop: 14, padding: '12px 16px', background: '#fafcfe', border: '1px solid #eef3f8', borderRadius: 8, fontSize: 13 },
  totalsChips:{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' },
  totalsChip: { display: 'inline-flex', alignItems: 'center', gap: 6, color: 'rgba(0,0,0,.65)' },
  grandChip:  { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 6, background: '#142E47', color: '#fff' },

  /* gantt */
  gantt:      { background: '#fff', border: '1px solid #f0f0f0', borderRadius: 8, padding: '8px 16px 16px', overflow: 'hidden' },
  gRow:       { display: 'flex', alignItems: 'center', height: 40 },
  gLabelHead: { width: 232, flexShrink: 0, fontWeight: 500, color: 'rgba(0,0,0,.45)', fontSize: 13 },
  gAxis:      { position: 'relative', flex: 1, height: 24 },
  gMonth:     { position: 'absolute', top: 0, fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,.45)', borderLeft: '1px solid #f0f0f0', paddingLeft: 8, height: 24, lineHeight: '24px' },
  gLabel:     { width: 232, flexShrink: 0, display: 'flex', alignItems: 'center', gap: 9, fontSize: 13.5, color: 'var(--color-text)', paddingRight: 12 },
  gTrack:     { position: 'relative', flex: 1, height: 28 },
  gGrid:      { position: 'absolute', top: -6, bottom: -6, width: 1, background: '#f5f5f5' },
  gBar:       { position: 'absolute', top: 3, height: 22, borderRadius: 5, overflow: 'hidden', display: 'flex', boxShadow: '0 1px 2px rgba(20,46,71,.18)' },
  gBarLabel:  { position: 'absolute', right: 8, top: 0, height: 22, display: 'flex', alignItems: 'center', fontSize: 11, fontWeight: 600, color: '#fff', textShadow: '0 1px 2px rgba(0,0,0,.35)' },
  today:      { position: 'absolute', top: 0, bottom: 0, width: 2, background: '#ff4d4f' },
  todayTag:   { position: 'absolute', top: -2, left: 3, fontSize: 10, fontWeight: 600, color: '#ff4d4f', whiteSpace: 'nowrap' },

  /* roadmap */
  roadmap:    { display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 },
  rmCol:      { background: '#f7fafd', border: '1px solid #eef3f8', borderRadius: 10, padding: 10, minHeight: 120 },
  rmHead:     { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '2px 6px 10px' },
  rmMonth:    { fontSize: 15, fontWeight: 700, color: '#142E47' },
  rmCount:    { fontSize: 12, fontWeight: 600, color: '#275C8D', background: '#e6f4fb', padding: '2px 8px', borderRadius: 12 },
  rmStack:    { display: 'flex', flexDirection: 'column', gap: 10 },
  rmCard:     { background: '#fff', border: '1px solid #eef0f2', borderRadius: 8, padding: 12, boxShadow: '0 1px 2px rgba(0,0,0,.03)' },
  rmCardTop:  { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 },
  rmName:     { fontSize: 13.5, fontWeight: 600, color: '#142E47', lineHeight: 1.35, marginBottom: 10 },
  rmMini:     { display: 'flex', flexWrap: 'wrap', gap: '5px 10px', marginBottom: 10 },
  rmMiniSeg:  { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'rgba(0,0,0,.6)', fontVariantNumeric: 'tabular-nums' },
  rmFoot:     { display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 9, borderTop: '1px solid #f4f4f4', fontSize: 12.5, color: '#142E47' },
  rmEmpty:    { fontSize: 12.5, color: 'rgba(0,0,0,.3)', padding: '14px 6px', textAlign: 'center' },
};