{
  @supports (padding: env(safe-area-inset-top)) : { .on-nav { padding-top: max(8px, env(safe-area-inset-top)); } .container, .container-narrow { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } };
  ::-webkit-scrollbar                           : { width: 6px; height: 6px; };
  ::-webkit-scrollbar-track                     : { background: transparent; };
  ::-webkit-scrollbar-thumb                     : { background: #3b393e; border-radius: 3px; };
  ::selection                                   : { background: rgba(111,179,192,0.35); };
}

*,
::before,
::after
{
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  -ms-box-sizing     : border-box;
  -o-box-sizing      : border-box;
  box-sizing         : border-box;
  margin             : 0 0 0 0;
  padding            : 0 0 0 0;
}

html
{
  -webkit-text-size-adjust : 100%;
  -webkit-font-smoothing   : antialiased;
  -moz-osx-font-smoothing  : grayscale;
  text-rendering           : optimizeLegibility;
}

body
{
  font-family      : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-size        : 15px;
  line-height      : 1.6;
  color            : #efd5c5;
  background-color : #232025;
  min-height       : 100vh;
  min-height       : 100dvh;
  padding-bottom   : env(safe-area-inset-bottom, 0);
}

a
{
  color           : #57b0ff;
  text-decoration : none;
}

a:visited
{
  color : #57b0ff;
}

a:hover
{
  text-decoration       : underline;
  text-underline-offset : 2px;
}

h1,
h2,
h3,
h4
{
  font-family    : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-weight    : 600;
  letter-spacing : -0.02em;
  line-height    : 1.3;
}

h1
{
  font-size     : 1.35rem;
  margin-bottom : 8px;
}

h2
{
  font-size     : 1.15rem;
  margin-bottom : 8px;
  color         : #efd5c5;
}

h3
{
  font-size     : 1rem;
  margin-bottom : 4px;
}

code
{
  font-size        : 0.9em;
  background-color : #322f34;
  padding          : 1px 5px 1px 5px;
  border-radius    : 4px 4px 4px 4px;
  border           : 1px solid #3b393e;
}

pre
{
  font-size        : 12px;
  background-color : #232025;
  border           : 1px solid #3b393e;
  padding          : 8px 16px 8px 16px;
  border-radius    : 6px 6px 6px 6px;
  overflow         : auto;
  white-space      : pre-wrap;
  word-break       : break-all;
}

pre > code
{
  background-color : rgba(0,0,0,0.0);
  border           : 0 none rgba(0,0,0,0.0);
  padding          : 0 0 0 0;
  font-size        : inherit;
}

.reading
{
  font-family    : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-size      : 16px;
  line-height    : 1.7;
  letter-spacing : -0.011em;
  max-width      : 680px;
}

.reading > p
{
  margin-bottom : 1em;
}

.reading > h1
{
  font-size   : 1.5rem;
  margin      : 1.5em 0 0.5em 0;
  font-family : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-weight : bold;
}

.reading > h2
{
  font-size   : 1.25rem;
  margin      : 1.25em 0 0.4em 0;
  font-family : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-weight : 600;
}

.reading > h3
{
  font-size   : 1.1rem;
  margin      : 1em 0 0.3em 0;
  font-family : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-weight : 600;
}

.reading > ul,
.reading > ol
{
  margin       : 0.5em 0 1em 0;
  padding-left : 1.5em;
}

.reading li
{
  margin-bottom : 0.3em;
}

.reading > blockquote
{
  border-left  : 3px solid #5a9aa6;
  padding-left : 16px;
  color        : #8f8886;
  margin       : 1em 0 1em 0;
}

.reading img
{
  max-width     : 100%;
  height        : auto;
  border-radius : 6px 6px 6px 6px;
}

.reading a
{
  text-underline-offset     : 3px;
  text-decoration-thickness : 1px;
}

.reading a:hover
{
  text-decoration-thickness : 2px;
}

.container
{
  width     : 100%;
  max-width : 960px;
  margin    : 0 auto 0 auto;
  padding   : 8px 16px 8px 16px;
}

.container-narrow
{
  width     : 100%;
  max-width : 680px;
  margin    : 0 auto 0 auto;
  padding   : 8px 16px 8px 16px;
}

.on-nav
{
  display                 : flex;
  align-items             : center;
  font-family             : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  gap                     : 4px;
  padding                 : 8px 16px 8px 16px;
  border-bottom           : 1px solid #3b393e;
  background-color        : #232025;
  position                : -webkit-sticky;
  position                : sticky;
  top                     : 0;
  z-index                 : 100;
  backdrop-filter         : blur(12px);
  -webkit-backdrop-filter : blur(12px);
}

.on-nav-brand
{
  font-weight     : bold;
  font-size       : 14px;
  color           : #6fb3c0;
  text-decoration : none;
  letter-spacing  : 0.05em;
  margin-right    : 8px;
}

.on-nav-brand:hover
{
  text-decoration : none;
  opacity         : 0.8;
}

.on-nav-links
{
  display : flex;
  gap     : 2px;
}

.on-nav-link
{
  font-size          : 12px;
  color              : #8f8886;
  padding            : 4px 10px 4px 10px;
  border-radius      : 4px 4px 4px 4px;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
}

.on-nav-link:hover
{
  background-color : #322f34;
  color            : #efd5c5;
  text-decoration  : none;
}

.on-active
{
  color            : #6fb3c0;
  background-color : #322f34;
}

.card
{
  background-color : #2c292e;
  border           : 1px solid #3b393e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 16px 8px 16px;
}

.card-link
{
  display         : block;
  text-decoration : none;
  color           : inherit;
}

.card-link:hover
{
  text-decoration : none;
}

.card-link:hover > .card
{
  border-color : #5a9aa6;
}

.badge
{
  display        : inline-block;
  font-size      : 11px;
  font-family    : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-weight    : 500;
  padding        : 2px 8px 2px 8px;
  border-radius  : 4px 4px 4px 4px;
  letter-spacing : 0.03em;
  white-space    : nowrap;
}

.badge-open
{
  background : rgba(250,204,21,0.15);
  color      : #c0b24f;
}

.badge-inprogress
{
  background : rgba(96,165,250,0.15);
  color      : #57b0ff;
}

.badge-review
{
  background : rgba(167,139,250,0.15);
  color      : #d0b0ff;
}

.badge-approved
{
  background : rgba(34,211,238,0.15);
  color      : #6fb3c0;
}

.badge-done
{
  background : rgba(74,222,128,0.15);
  color      : #51b04f;
}

.badge-needshelp
{
  background : rgba(251,146,60,0.15);
  color      : #f3c09a;
}

.badge-p0
{
  background : rgba(248,113,113,0.15);
  color      : #ff6f6f;
}

.badge-p1
{
  background : rgba(251,146,60,0.15);
  color      : #f3c09a;
}

.badge-p2
{
  background : rgba(96,165,250,0.15);
  color      : #57b0ff;
}

.badge-p3
{
  background-color : #322f34;
  color            : #8f8886;
}

.badge-p4
{
  background-color : #322f34;
  color            : #6b6568;
}

.btn
{
  display                     : inline-flex;
  align-items                 : center;
  justify-content             : center;
  gap                         : 4px;
  min-height                  : 36px;
  padding                     : 6px 14px 6px 14px;
  font-family                 : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-size                   : 12px;
  font-weight                 : 500;
  border                      : 1px solid #3b393e;
  border-radius               : 6px 6px 6px 6px;
  background-color            : #2c292e;
  color                       : #efd5c5;
  cursor                      : pointer;
  -webkit-transition          : all 150.0ms ease 0.0s;
  -moz-transition             : all 150.0ms ease 0.0s;
  -ms-transition              : all 150.0ms ease 0.0s;
  -o-transition               : all 150.0ms ease 0.0s;
  transition                  : all 150.0ms ease 0.0s;
  text-decoration             : none;
  -webkit-tap-highlight-color : transparent;
  touch-action                : manipulation;
}

.btn:hover
{
  background-color : #322f34;
  border-color     : #6b6568;
  text-decoration  : none;
}

.btn:active
{
  background-color : #3b393e;
}

.btn-primary
{
  background-color : #5a9aa6;
  color            : #ffffff;
  border-color     : #5a9aa6;
}

.btn-primary:hover
{
  background-color : #6fb3c0;
  border-color     : #6fb3c0;
  color            : #000000;
}

.btn-danger
{
  background   : rgba(248,113,113,0.15);
  color        : #ff6f6f;
  border-color : rgba(248,113,113,0.3);
}

.btn-danger:hover
{
  background : rgba(248,113,113,0.25);
}

.btn-ghost
{
  background-color : rgba(0,0,0,0.0);
  border-color     : rgba(0,0,0,0.0);
}

.btn-ghost:hover
{
  background-color : #322f34;
}

input,
select,
textarea
{
  font-family        : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-size          : 13px;
  color              : #efd5c5;
  background-color   : #232025;
  border             : 1px solid #3b393e;
  border-radius      : 6px 6px 6px 6px;
  padding            : 8px 12px 8px 12px;
  outline            : none;
  -webkit-transition : border-color 150.0ms ease 0.0s;
  -moz-transition    : border-color 150.0ms ease 0.0s;
  -ms-transition     : border-color 150.0ms ease 0.0s;
  -o-transition      : border-color 150.0ms ease 0.0s;
  transition         : border-color 150.0ms ease 0.0s;
}

input:focus,
select:focus,
textarea:focus
{
  border-color : #5a9aa6;
  box-shadow   : 0 0 0 2px rgba(111,179,192,0.2);
}

textarea
{
  resize     : vertical;
  min-height : 80px;
}

table
{
  width           : 100%;
  border-collapse : collapse;
}

th,
td
{
  text-align    : left;
  padding       : 8px 12px 8px 12px;
  border-bottom : 1px solid #3b393e;
}

th
{
  color          : #8f8886;
  font-size      : 11px;
  text-transform : uppercase;
  letter-spacing : 0.06em;
  font-weight    : 500;
}

tr:hover
{
  background-color : #322f34;
}

tr:last-child > td
{
  border-bottom : 0 none rgba(0,0,0,0.0);
}

.muted
{
  color : #8f8886;
}

.faint
{
  color : #6b6568;
}

.accent
{
  color : #6fb3c0;
}

.text-sm
{
  font-size : 13px;
}

.text-xs
{
  font-size : 11px;
}

.text-sans
{
  font-family : "-apple-system","BlinkMacSystemFont","SF Pro Text","Inter","system-ui","sans-serif", sans-serif;
}

.mono
{
  font-family : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
}

.empty-state
{
  color      : #6b6568;
  font-style : italic;
  padding    : 16px 0 16px 0;
}

.divider
{
  border     : 0 none rgba(0,0,0,0.0);
  border-top : 1px solid #3b393e;
  margin     : 16px 0 16px 0;
}

@media screen and (max-width: 640px)
{

body
{
  font-size : 16px;
}

.container,
.container-narrow
{
  padding : 8px 8px 8px 8px;
}

.on-nav
{
  padding : 8px 8px 8px 8px;
}

.on-nav-link
{
  padding   : 6px 8px 6px 8px;
  font-size : 13px;
}

.on-nav-brand
{
  font-size : 15px;
}

.card
{
  padding : 8px 8px 8px 8px;
}

h1
{
  font-size : 1.2rem;
}

.reading
{
  font-size   : 16px;
  line-height : 1.65;
}

.hide-mobile
{
  display : none;
}

}

/* Generated with Clay, http://fvisser.nl/clay */
{
  @keyframes pulse : 0%, 100% { opacity: 1; } 50% { opacity: 0.5; };
}

body
{
  font-family      : "SF Pro Text","Inter","-apple-system","BlinkMacSystemFont","system-ui","sans-serif", sans-serif;
  font-size        : 15px;
  line-height      : 1.6;
  color            : #efd5c5;
  background-color : #232025;
  min-height       : 100vh;
}

h1
{
  font-size   : 20px;
  font-weight : bold;
  margin      : 0px 0px 0.3em 0px;
}

h2
{
  font-size   : 16px;
  font-weight : 600;
  color       : #efd5c5;
  margin      : 1em 0px 0.5em 0px;
}

h3
{
  font-size   : 14px;
  font-weight : 600;
  color       : #efd5c5;
  margin      : 0.75em 0px 0.25em 0px;
}

a
{
  color           : #57b0ff;
  text-decoration : none;
}

a:visited
{
  color : #57b0ff;
}

a:hover
{
  text-decoration       : underline;
  text-underline-offset : 2px;
}

code
{
  font-family      : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-size        : 0.9em;
  background-color : #322f34;
  padding          : 1px 5px 1px 5px;
  border-radius    : 4px 4px 4px 4px;
  border           : 1px solid #3b393e;
}

pre
{
  font-family      : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-size        : 12px;
  background-color : #232025;
  color            : #efd5c5;
  border           : 1px solid #3b393e;
  padding          : 8px 16px 8px 16px;
  border-radius    : 6px 6px 6px 6px;
  overflow         : auto;
  white-space      : pre-wrap;
  max-height       : 500px;
}

.container
{
  width     : 100%;
  max-width : 960px;
  margin    : 0px auto 0px auto;
  padding   : 8px 16px 8px 16px;
}

main
{
  flex : 1 0 auto;
}

.page-content
{
  padding : 0px 0px 0px 0px;
}

.stats-grid
{
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(80px, 1fr));
  gap                   : 10px;
}

.task-list
{
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

.detail-row
{
  display       : flex;
  flex-wrap     : wrap;
  padding       : 6px 0px 6px 0px;
  margin-bottom : 4px;
}

.detail-label
{
  font-weight : 600;
  width       : 100px;
  color       : #8f8886;
  min-width   : 80px;
  font-size   : 13px;
}

.detail-value
{
  flex      : 1;
  min-width : 0px;
}

.detail-section
{
  margin-top  : 0.75em;
  padding-top : 0.75em;
  border-top  : 1px solid #322f34;
}

.dep-list,
.child-list
{
  margin       : 4px 0px 4px 0px;
  padding-left : 16px;
}

.dep-list li,
.child-list li
{
  margin : 2px 0px 2px 0px;
}

.dep-type,
.child-status
{
  color     : #8f8886;
  font-size : 12px;
}

.child-title
{
  color : #efd5c5;
}

.priority-desc
{
  color       : #8f8886;
  margin-left : 4px;
}

.subnav
{
  display       : flex;
  gap           : 2px;
  padding       : 4px 16px 4px 16px;
  border-bottom : 1px solid #322f34;
  font-family   : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  font-size     : 12px;
}

.subnav-link
{
  font-size          : 12px;
  color              : #6b6568;
  padding            : 4px 10px 4px 10px;
  border-radius      : 4px 4px 4px 4px;
  text-decoration    : none;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
}

.subnav-link:hover
{
  color            : #efd5c5;
  background-color : #322f34;
  text-decoration  : none;
}

.navbar-dropdown
{
  position : relative;
  display  : inline-block;
}

.navbar-dropdown-btn
{
  display            : inline-block;
  padding            : 4px 10px 4px 10px;
  color              : #8f8886;
  background-color   : rgba(0,0,0,0.0);
  border             : 0px none rgba(0,0,0,0.0);
  border-radius      : 4px 4px 4px 4px;
  font-size          : 12px;
  font-weight        : 500;
  cursor             : pointer;
  font-family        : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
}

.navbar-dropdown-btn:hover
{
  background-color : #322f34;
  color            : #efd5c5;
}

.navbar-dropdown-content
{
  display          : none;
  position         : absolute;
  left             : 0px;
  top              : 100%;
  background-color : #2c292e;
  min-width        : 120px;
  box-shadow       : 0 4px 16px rgba(0,0,0,0.4);
  border-radius    : 6px 6px 6px 6px;
  border           : 1px solid #3b393e;
  z-index          : 100;
  overflow         : hidden;
}

.navbar-dropdown:hover > .navbar-dropdown-content
{
  display : block;
}

.navbar-dropdown.open > .navbar-dropdown-content
{
  display : block;
}

.navbar-dropdown-item
{
  display            : block;
  padding            : 8px 12px 8px 12px;
  color              : #8f8886;
  text-decoration    : none;
  font-size          : 12px;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
}

.navbar-dropdown-item:hover
{
  background-color : #322f34;
  color            : #efd5c5;
  text-decoration  : none;
}

header
{
  background-color : #232025;
  padding          : 8px 16px 8px 16px;
  border-bottom    : 1px solid #3b393e;
}

.nav-content
{
  max-width       : 960px;
  margin          : 0px auto 0px auto;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 8px;
}

.nav-brand
{
  font-size       : 14px;
  font-weight     : bold;
  color           : #6fb3c0;
  text-decoration : none;
}

.nav-brand:hover
{
  text-decoration : none;
}

.nav-links
{
  display   : flex;
  gap       : 4px;
  flex-wrap : wrap;
}

.actions
{
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  gap            : 6px;
  margin-bottom  : 8px;
}

.breadcrumb-container
{
  background-color : rgba(0,0,0,0.0);
  padding          : 6px 0px 6px 0px;
}

.breadcrumb-list
{
  display         : flex;
  align-items     : center;
  flex-wrap       : wrap;
  gap             : 4px;
  margin          : 0px 0px 0px 0px;
  padding         : 0px 0px 0px 0px;
  list-style-type : none;
  font-size       : 12px;
}

.breadcrumb-item
{
  display     : flex;
  align-items : center;
  gap         : 4px;
}

.breadcrumb-sep
{
  color       : #6b6568;
  user-select : none;
}

.breadcrumb-current
{
  color       : #8f8886;
  font-weight : 500;
}

.breadcrumb-list a
{
  color           : #6fb3c0;
  text-decoration : none;
}

.breadcrumb-list a:hover
{
  text-decoration : underline;
}

.card,
.task-card,
.stat-card,
.task-detail,
.task-summary,
.filter-form,
.status-form,
.diff-section,
.review-actions
{
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 12px 8px 12px;
  border           : 1px solid #3b393e;
}

.review-actions
{
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  align-items    : center;
  gap            : 8px;
}

.stat-card
{
  text-align : center;
}

.stat-count
{
  font-size   : 22px;
  font-weight : bold;
}

.stat-label
{
  font-size  : 11px;
  color      : #8f8886;
  margin-top : 2px;
}

.stat-card.badge-open
{
  border-left : 4px solid #c0b24f;
}

.stat-card.badge-open > .stat-count
{
  color : #c0b24f;
}

.stat-card.badge-inprogress
{
  border-left : 4px solid #57b0ff;
}

.stat-card.badge-inprogress > .stat-count
{
  color : #57b0ff;
}

.stat-card.badge-review
{
  border-left : 4px solid #d0b0ff;
}

.stat-card.badge-review > .stat-count
{
  color : #d0b0ff;
}

.stat-card.badge-approved
{
  border-left : 4px solid #6fb3c0;
}

.stat-card.badge-approved > .stat-count
{
  color : #6fb3c0;
}

.stat-card.badge-done
{
  border-left : 4px solid #51b04f;
}

.stat-card.badge-done > .stat-count
{
  color : #51b04f;
}

.stat-card.badge-neutral
{
  border-left : 4px solid #8f8886;
}

.stat-card.badge-neutral > .stat-count
{
  color : #8f8886;
}

.task-card
{
  -webkit-transition : border-color 150.0ms ease 0.0s;
  -moz-transition    : border-color 150.0ms ease 0.0s;
  -ms-transition     : border-color 150.0ms ease 0.0s;
  -o-transition      : border-color 150.0ms ease 0.0s;
  transition         : border-color 150.0ms ease 0.0s;
}

.task-card:hover
{
  border-color : #5a9aa6;
}

.task-card-link
{
  display         : block;
  text-decoration : none;
  color           : #efd5c5;
  cursor          : pointer;
}

.task-card-link:visited
{
  color : #efd5c5;
}

.task-card-link:hover
{
  text-decoration : none;
}

.task-header
{
  display       : flex;
  flex-wrap     : wrap;
  align-items   : center;
  gap           : 6px;
  margin-bottom : 4px;
}

.task-id
{
  font-family     : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  color           : #6fb3c0;
  text-decoration : none;
  font-size       : 12px;
  padding         : 2px 0px 2px 0px;
}

.task-id:hover
{
  text-decoration : underline;
}

.priority
{
  font-size : 11px;
  color     : #8f8886;
}

.blocking-impact
{
  font-size        : 10px;
  color            : #8f8886;
  background-color : #3b393e;
  padding          : 1px 6px 1px 6px;
  border-radius    : 8px 8px 8px 8px;
  margin-left      : auto;
}

.task-title
{
  font-size : 15px;
  color     : #efd5c5;
  margin    : 0px 0px 0px 0px;
}

.empty-msg
{
  color      : #8f8886;
  font-style : italic;
}

.info-msg
{
  color         : #8f8886;
  margin-bottom : 12px;
}

.kb-preview
{
  color         : #8f8886;
  font-size     : 12px;
  margin-top    : 4px;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.ready-link
{
  font-size : 13px;
  color     : #6fb3c0;
}

.count-badge
{
  background-color : #5a9aa6;
  color            : #ffffff;
  padding          : 2px 8px 2px 8px;
  border-radius    : 10px 10px 10px 10px;
  font-size        : 12px;
  vertical-align   : middle;
}

.description
{
  background-color : #2c292e;
  padding          : 8px 8px 8px 8px;
  border-radius    : 0px 0px 0px 0px;
  margin           : 0px 0px 0px 0px;
  color            : #efd5c5;
  font-size        : 13px;
}


.description-header
{
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  margin-bottom   : 8px;
}

.description-header > h3
{
  margin : 0px 0px 0px 0px;
}

.edit-link,
.cancel-link
{
  font-size : 12px;
  color     : #6fb3c0;
}

button.cancel-link
{
  color            : #ff6f6f;
  background-color : rgba(0,0,0,0.0);
  border           : 0px solid rgba(0,0,0,0.0);
  padding          : 0px 0px 0px 0px;
  cursor           : pointer;
  text-decoration  : underline;
}

.diff-block
{
  max-height : 600px;
  overflow-y : auto;
}

.progress-bar
{
  height           : 6px;
  background-color : #3b393e;
  border-radius    : 2px 2px 2px 2px;
  overflow         : hidden;
  margin-top       : 6px;
}

.progress-fill
{
  height             : 100%;
  background-color   : #5a9aa6;
  border-radius      : 2px 2px 2px 2px;
  -webkit-transition : width 300.0ms ease 0.0s;
  -moz-transition    : width 300.0ms ease 0.0s;
  -ms-transition     : width 300.0ms ease 0.0s;
  -o-transition      : width 300.0ms ease 0.0s;
  transition         : width 300.0ms ease 0.0s;
}

.multi-progress-container
{
  margin-bottom : 12px;
}

.multi-progress-bar
{
  display          : flex;
  height           : 8px;
  background-color : #3b393e;
  border-radius    : 4px 4px 4px 4px;
  overflow         : hidden;
  margin-top       : 6px;
}

.multi-progress-segment
{
  height             : 100%;
  -webkit-transition : width 300.0ms ease 0.0s;
  -moz-transition    : width 300.0ms ease 0.0s;
  -ms-transition     : width 300.0ms ease 0.0s;
  -o-transition      : width 300.0ms ease 0.0s;
  transition         : width 300.0ms ease 0.0s;
}

.progress-done
{
  background-color : #51b04f;
}

.progress-inprogress
{
  background-color : #c0b24f;
}

.progress-open
{
  background-color : #57b0ff;
}

.progress-legend
{
  display    : flex;
  gap        : 16px;
  margin-top : 6px;
  font-size  : 12px;
  color      : #8f8886;
}

.legend-item
{
  display     : flex;
  align-items : center;
  gap         : 4px;
}

.legend-dot
{
  display       : inline-block;
  width         : 10px;
  height        : 10px;
  border-radius : 2px 2px 2px 2px;
}

.legend-done
{
  background-color : #51b04f;
}

.legend-inprogress
{
  background-color : #c0b24f;
}

.legend-open
{
  background-color : #57b0ff;
}

.stats-section
{
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 10px 8px 10px;
  border           : 1px solid #3b393e;
}

.stats-row
{
  display       : flex;
  align-items   : center;
  gap           : 8px;
  padding       : 4px 0px 4px 0px;
  margin-bottom : 2px;
}

.stats-label
{
  min-width   : 80px;
  font-weight : 500;
  font-size   : 13px;
}

.stats-bar-container
{
  flex : 1;
}

.stats-count
{
  min-width   : 32px;
  text-align  : right;
  font-weight : 500;
  font-size   : 13px;
}

.summary-section
{
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 10px 8px 10px;
  border           : 1px solid #3b393e;
}

.no-commit-msg
{
  background    : rgba(250,204,21,0.1);
  border        : 1px solid #c0b24f;
  border-radius : 2px 2px 2px 2px;
  padding       : 8px 10px 8px 10px;
  margin        : 8px 0px 8px 0px;
}

.conflict-warning
{
  background    : rgba(248,113,113,0.1);
  border        : 1px solid #ff6f6f;
  border-radius : 2px 2px 2px 2px;
  padding       : 8px 10px 8px 10px;
  margin        : 8px 0px 8px 0px;
}

.list-group
{
  display          : flex;
  flex-direction   : column;
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  border           : 1px solid #3b393e;
  overflow         : hidden;
}

.list-group-item
{
  display            : flex;
  align-items        : center;
  justify-content    : space-between;
  padding            : 8px 10px 8px 10px;
  border-bottom      : 1px solid #322f34;
  text-decoration    : none;
  color              : #efd5c5;
  -webkit-transition : background-color 150.0ms ease 0.0s;
  -moz-transition    : background-color 150.0ms ease 0.0s;
  -ms-transition     : background-color 150.0ms ease 0.0s;
  -o-transition      : background-color 150.0ms ease 0.0s;
  transition         : background-color 150.0ms ease 0.0s;
}

.list-group-item:visited
{
  color : #efd5c5;
}

.list-group-item:last-child
{
  border-bottom : 0px none rgba(0,0,0,0.0);
}

.list-group-item:hover
{
  background-color : #322f34;
  text-decoration  : none;
}

.list-group-item-content
{
  display     : flex;
  align-items : center;
  gap         : 8px;
  flex        : 1;
  min-width   : 0px;
}

.list-group-item-id
{
  font-family : "SF Mono","Monaco","monospace", monospace;
  color       : #6fb3c0;
  font-size   : 12px;
  flex-shrink : 0;
}

.list-group-item-title
{
  font-size     : 15px;
  color         : #efd5c5;
  flex          : 1;
  min-width     : 0px;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.list-group-item-meta
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  flex-shrink : 0;
}

.badge
{
  display       : inline-block;
  padding       : 2px 6px 2px 6px;
  border-radius : 2px 2px 2px 2px;
  font-size     : 11px;
  font-weight   : 500;
  white-space   : nowrap;
}

.badge-open
{
  background : rgba(250,204,21,0.15);
  color      : #c0b24f;
}

.badge-inprogress
{
  background : rgba(96,165,250,0.15);
  color      : #57b0ff;
}

.badge-review
{
  background : rgba(167,139,250,0.15);
  color      : #d0b0ff;
}

.badge-approved
{
  background : rgba(34,211,238,0.15);
  color      : #6fb3c0;
}

.badge-done
{
  background : rgba(74,222,128,0.15);
  color      : #51b04f;
}

.badge-needshelp
{
  background : rgba(251,146,60,0.15);
  color      : #f3c09a;
}

.status-badge-dropdown
{
  position : relative;
  display  : inline-block;
}

.status-badge-clickable
{
  cursor      : pointer;
  user-select : none;
}

.status-badge-clickable:hover
{
  opacity : 0.85;
}

.dropdown-arrow
{
  font-size   : 8px;
  margin-left : 2px;
  opacity     : 0.7;
}

.status-dropdown-menu
{
  display          : none;
  position         : absolute;
  left             : 0px;
  top              : 100%;
  margin-top       : 2px;
  background-color : #2c292e;
  border-radius    : 4px 4px 4px 4px;
  box-shadow       : 0 2px 8px rgba(0,0,0,0.15);
  z-index          : 100;
  padding          : 4px 4px 4px 4px;
  min-width        : 100px;
}

.status-badge-dropdown.open > .status-dropdown-menu
{
  display : block;
}

.status-option-form
{
  margin  : 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
}

.status-dropdown-option
{
  display            : block;
  width              : 100%;
  text-align         : left;
  margin             : 2px 0px 2px 0px;
  border             : 0px none rgba(0,0,0,0.0);
  cursor             : pointer;
  -webkit-transition : opacity 150.0ms ease 0.0s;
  -moz-transition    : opacity 150.0ms ease 0.0s;
  -ms-transition     : opacity 150.0ms ease 0.0s;
  -o-transition      : opacity 150.0ms ease 0.0s;
  transition         : opacity 150.0ms ease 0.0s;
}

.status-dropdown-option:hover
{
  opacity : 0.7;
}

.status-dropdown-option:focus
{
  opacity        : 0.85;
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.status-dropdown-option.selected
{
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.status-badge-clickable:focus
{
  outline        : 2px solid #0066cc;
  outline-offset : 2px;
}

.badge-p0
{
  background : rgba(248,113,113,0.15);
  color      : #ff6f6f;
}

.badge-p1
{
  background : rgba(251,146,60,0.15);
  color      : #f3c09a;
}

.badge-p2
{
  background : rgba(96,165,250,0.15);
  color      : #57b0ff;
}

.badge-p3
{
  background-color : #322f34;
  color            : #8f8886;
}

.badge-p4
{
  background-color : #322f34;
  color            : #6b6568;
}

.priority-badge-dropdown
{
  position : relative;
  display  : inline-block;
}

.priority-badge-clickable
{
  cursor      : pointer;
  user-select : none;
}

.priority-badge-clickable:hover
{
  opacity : 0.85;
}

.priority-dropdown-menu
{
  display          : none;
  position         : absolute;
  left             : 0px;
  top              : 100%;
  margin-top       : 2px;
  background-color : #2c292e;
  border-radius    : 4px 4px 4px 4px;
  box-shadow       : 0 2px 8px rgba(0,0,0,0.15);
  z-index          : 100;
  padding          : 4px 4px 4px 4px;
  min-width        : 100px;
}

.priority-badge-dropdown.open > .priority-dropdown-menu
{
  display : block;
}

.priority-option-form
{
  margin  : 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
}

.priority-dropdown-option
{
  display            : block;
  width              : 100%;
  text-align         : left;
  margin             : 2px 0px 2px 0px;
  border             : 0px none rgba(0,0,0,0.0);
  cursor             : pointer;
  -webkit-transition : opacity 150.0ms ease 0.0s;
  -moz-transition    : opacity 150.0ms ease 0.0s;
  -ms-transition     : opacity 150.0ms ease 0.0s;
  -o-transition      : opacity 150.0ms ease 0.0s;
  transition         : opacity 150.0ms ease 0.0s;
}

.priority-dropdown-option:hover
{
  opacity : 0.7;
}

.priority-dropdown-option:focus
{
  opacity        : 0.85;
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.priority-dropdown-option.selected
{
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.priority-badge-clickable:focus
{
  outline        : 2px solid #0066cc;
  outline-offset : 2px;
}

.badge-complexity
{
  background : rgba(96,165,250,0.1);
  color      : #5a9aa6;
}

.badge-complexity-1
{
  background : rgba(74,222,128,0.1);
  color      : #51b04f;
}

.badge-complexity-2
{
  background : rgba(96,165,250,0.1);
  color      : #57b0ff;
}

.badge-complexity-3
{
  background : rgba(250,204,21,0.15);
  color      : #c0b24f;
}

.badge-complexity-4
{
  background : rgba(250,204,21,0.15);
  color      : #f3c09a;
}

.badge-complexity-5
{
  background : rgba(248,113,113,0.1);
  color      : #ff6f6f;
}

.badge-complexity-none
{
  background-color : #322f34;
  color            : #8f8886;
}

.complexity-badge-dropdown
{
  position : relative;
  display  : inline-block;
}

.complexity-badge-clickable
{
  cursor      : pointer;
  user-select : none;
}

.complexity-badge-clickable:hover
{
  opacity : 0.85;
}

.complexity-dropdown-menu
{
  display          : none;
  position         : absolute;
  left             : 0px;
  top              : 100%;
  margin-top       : 2px;
  background-color : #2c292e;
  border-radius    : 4px 4px 4px 4px;
  box-shadow       : 0 2px 8px rgba(0,0,0,0.15);
  z-index          : 100;
  padding          : 4px 4px 4px 4px;
  min-width        : 100px;
}

.complexity-badge-dropdown.open > .complexity-dropdown-menu
{
  display : block;
}

.complexity-option-form
{
  margin  : 0px 0px 0px 0px;
  padding : 0px 0px 0px 0px;
}

.complexity-dropdown-option
{
  display            : block;
  width              : 100%;
  text-align         : left;
  margin             : 2px 0px 2px 0px;
  border             : 0px none rgba(0,0,0,0.0);
  cursor             : pointer;
  -webkit-transition : opacity 150.0ms ease 0.0s;
  -moz-transition    : opacity 150.0ms ease 0.0s;
  -ms-transition     : opacity 150.0ms ease 0.0s;
  -o-transition      : opacity 150.0ms ease 0.0s;
  transition         : opacity 150.0ms ease 0.0s;
}

.complexity-dropdown-option:hover
{
  opacity : 0.7;
}

.complexity-dropdown-option:focus
{
  opacity        : 0.85;
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.complexity-dropdown-option.selected
{
  outline        : 2px solid #0066cc;
  outline-offset : 1px;
}

.complexity-badge-clickable:focus
{
  outline        : 2px solid #0066cc;
  outline-offset : 2px;
}

.btn,
.action-btn,
.filter-btn,
.submit-btn,
.accept-btn,
.reject-btn,
.review-link-btn
{
  display            : inline-block;
  min-height         : 36px;
  padding            : 6px 12px 6px 12px;
  border-radius      : 2px 2px 2px 2px;
  border             : 0px none rgba(0,0,0,0.0);
  font-size          : 13px;
  font-weight        : 500;
  text-decoration    : none;
  cursor             : pointer;
  text-align         : center;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
  touch-action       : manipulation;
}

.action-btn
{
  background-color : #2c292e;
  border           : 1px solid #3b393e;
  color            : #efd5c5;
}

.action-btn:hover
{
  background-color : #322f34;
  border-color     : #6b6568;
}

.action-btn-primary,
.filter-btn,
.submit-btn
{
  background-color : #5a9aa6;
  color            : #ffffff;
  border-color     : #5a9aa6;
}

.action-btn-primary:hover,
.filter-btn:hover,
.submit-btn:hover
{
  background-color : #6fb3c0;
  color            : #000000;
}

.accept-btn
{
  background : rgba(74,222,128,0.15);
  color      : #51b04f;
}

.accept-btn:hover
{
  background : rgba(74,222,128,0.25);
}

.reject-btn
{
  background : rgba(248,113,113,0.15);
  color      : #ff6f6f;
}

.reject-btn:hover
{
  background : rgba(248,113,113,0.25);
}

.clear-btn
{
  display          : inline-block;
  min-height       : 36px;
  padding          : 6px 10px 6px 10px;
  background-color : #322f34;
  color            : #efd5c5;
  border           : 1px solid #3b393e;
  border-radius    : 6px 6px 6px 6px;
  text-decoration  : none;
  font-size        : 13px;
  cursor           : pointer;
}

.clear-btn:hover
{
  background-color : #3b393e;
}

.review-link-btn
{
  background : rgba(167,139,250,0.15);
  color      : #d0b0ff;
}

.review-link-btn:hover
{
  background : rgba(167,139,250,0.25);
}

.review-link-section
{
  margin : 8px 0px 8px 0px;
}

.close-task-section
{
  margin : 8px 0px 8px 0px;
}

.close-task-form
{
  display : flex;
}

.btn-close-task
{
  background    : rgba(74,222,128,0.12);
  color         : #51b04f;
  border        : 1px solid #51b04f;
  border-radius : 6px 6px 6px 6px;
  padding       : 6px 16px 6px 16px;
  font-size     : 13px;
  cursor        : pointer;
}

.btn-close-task:hover
{
  background : rgba(74,222,128,0.22);
}

.btn-secondary,
.load-more-btn
{
  background-color : #8f8886;
  color            : #ffffff;
  width            : 100%;
  margin-top       : 8px;
}

.btn-secondary:hover,
.load-more-btn:hover
{
  background-color : #6b6568;
}

.filter-row
{
  display     : flex;
  flex-wrap   : wrap;
  gap         : 8px;
  align-items : flex-end;
}

.filter-group
{
  display        : flex;
  flex-direction : row;
  align-items    : center;
  gap            : 4px;
}

.filter-group > label
{
  font-size   : 12px;
  color       : #8f8886;
  font-weight : 500;
  white-space : nowrap;
}

.filter-select,
.filter-input,
.status-select
{
  min-height       : 36px;
  padding          : 6px 10px 6px 10px;
  border           : 1px solid #3b393e;
  border-radius    : 6px 6px 6px 6px;
  font-size        : 13px;
  font-family      : "SF Mono","Cascadia Code","JetBrains Mono","Fira Code","Menlo","Monaco","Courier New","monospace", monospace;
  background-color : #232025;
  color            : #efd5c5;
  min-width        : 100px;
}

.filter-input
{
  min-width : 120px;
}

.inline-form
{
  display : inline-block;
}

.reject-form
{
  display   : flex;
  gap       : 6px;
  flex      : 1;
  min-width : 200px;
  flex-wrap : wrap;
}

.reject-notes
{
  flex          : 1;
  min-width     : 160px;
  min-height    : 36px;
  padding       : 6px 10px 6px 10px;
  border        : 1px solid #3b393e;
  border-radius : 2px 2px 2px 2px;
  font-size     : 13px;
  resize        : vertical;
}

.edit-description
{
  margin-top : 8px;
  padding    : 8px 0px 0px 0px;
  border-top : 1px solid #322f34;
}

.edit-description > summary
{
  cursor      : pointer;
  color       : #6fb3c0;
  font-size   : 13px;
  font-weight : 500;
}

.edit-description > summary:hover
{
  text-decoration : underline;
}

.description-textarea
{
  width         : 100%;
  min-height    : 250px;
  padding       : 8px 10px 8px 10px;
  border        : 1px solid #3b393e;
  border-radius : 2px 2px 2px 2px;
  font-size     : 13px;
  font-family   : "SF Mono","Monaco","Consolas","monospace", monospace;
  line-height   : 1.5em;
  resize        : vertical;
  margin-top    : 8px;
}

.form-actions
{
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  gap            : 8px;
  margin-top     : 8px;
}

.fact-edit-form
{
  margin-top : 8px;
}

.form-group
{
  margin-bottom : 16px;
}

.form-group > label
{
  display       : block;
  margin-bottom : 4px;
  font-size     : 13px;
  font-weight   : 500;
  color         : #efd5c5;
}

.form-input,
.form-textarea
{
  width         : 100%;
  padding       : 8px 10px 8px 10px;
  border        : 1px solid #3b393e;
  border-radius : 2px 2px 2px 2px;
  font-size     : 14px;
  line-height   : 1.5em;
}

.form-input:focus,
.form-textarea:focus
{
  border-color : #5a9aa6;
  outline      : none;
  box-shadow   : 0 0 0 2px rgba(0, 102, 204, 0.2);
}

.form-textarea
{
  min-height  : 120px;
  resize      : vertical;
  font-family : "-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica Neue","Arial","sans-serif", sans-serif;
}

.btn
{
  display            : inline-block;
  padding            : 8px 16px 8px 16px;
  border             : 0px none rgba(0,0,0,0.0);
  border-radius      : 3px 3px 3px 3px;
  font-size          : 14px;
  font-weight        : 500;
  text-decoration    : none;
  cursor             : pointer;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
}

.btn-primary
{
  background-color : #5a9aa6;
  color            : #ffffff;
}

.btn-primary:hover
{
  background-color : #6fb3c0;
}

.btn-secondary
{
  background-color : #8f8886;
  color            : #ffffff;
}

.btn-secondary:hover
{
  background-color : #6b6568;
}

.btn-danger
{
  background-color : #ff6f6f;
  color            : #ffffff;
}

.btn-danger:hover
{
  background-color : #ff6f6f;
}

.danger-zone
{
  margin-top    : 24px;
  padding       : 16px 16px 16px 16px;
  background    : rgba(248,113,113,0.1);
  border        : 1px solid #ff6f6f;
  border-radius : 4px 4px 4px 4px;
}

.danger-zone > h2
{
  color         : #ff6f6f;
  margin-bottom : 12px;
}

.back-link
{
  margin-top  : 24px;
  padding-top : 16px;
  border-top  : 1px solid #322f34;
}

.back-link > a
{
  color           : #8f8886;
  text-decoration : none;
}

.back-link > a:hover
{
  color           : #efd5c5;
  text-decoration : underline;
}

.task-link
{
  color           : #6fb3c0;
  text-decoration : none;
  font-weight     : 500;
}

.task-link:hover
{
  text-decoration : underline;
}

.error-msg
{
  color         : #ff6f6f;
  background    : rgba(248,113,113,0.1);
  padding       : 16px 16px 16px 16px;
  border-radius : 4px 4px 4px 4px;
  border        : 1px solid #ff6f6f;
}

.create-fact-section
{
  margin-bottom : 16px;
}

.create-fact-toggle
{
  cursor  : pointer;
  display : inline-block;
}

.fact-create-form
{
  margin-top       : 12px;
  padding          : 16px 16px 16px 16px;
  background-color : #2c292e;
  border-radius    : 4px 4px 4px 4px;
  border           : 1px solid #3b393e;
}

.execution-section
{
  margin-top       : 1em;
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 10px 8px 10px;
  border           : 1px solid #3b393e;
}

.execution-details
{
  margin-top : 8px;
}

.metric-row
{
  display       : flex;
  flex-wrap     : wrap;
  padding       : 4px 0px 4px 0px;
  margin-bottom : 2px;
}

.metric-label
{
  font-weight : 600;
  width       : 120px;
  color       : #8f8886;
  font-size   : 13px;
}

.metric-value
{
  flex      : 1;
  font-size : 13px;
}

.amp-link
{
  color           : #6fb3c0;
  text-decoration : none;
  word-break      : break-all;
}

.amp-link:hover
{
  text-decoration : underline;
}

.amp-thread-btn
{
  display            : inline-block;
  padding            : 4px 10px 4px 10px;
  background-color   : #d0b0ff;
  color              : #ffffff;
  border-radius      : 3px 3px 3px 3px;
  text-decoration    : none;
  font-size          : 12px;
  font-weight        : 500;
  -webkit-transition : background-color 150.0ms ease 0.0s;
  -moz-transition    : background-color 150.0ms ease 0.0s;
  -ms-transition     : background-color 150.0ms ease 0.0s;
  -o-transition      : background-color 150.0ms ease 0.0s;
  transition         : background-color 150.0ms ease 0.0s;
}

.amp-thread-btn:hover
{
  background-color : #d0b0ff;
  text-decoration  : none;
}

.retry-count
{
  color       : #f3c09a;
  font-weight : 600;
}

.attempts-divider
{
  margin     : 12px 0px 12px 0px;
  border     : 0px none rgba(0,0,0,0.0);
  border-top : 1px solid #322f34;
}

.attempt-header
{
  font-weight    : 600;
  font-size      : 13px;
  color          : #efd5c5;
  margin-top     : 8px;
  margin-bottom  : 4px;
  padding-bottom : 4px;
  border-bottom  : 1px solid #322f34;
}

.aggregated-metrics
{
  margin-top  : 0.5em;
  padding-top : 0.75em;
}

.metrics-grid
{
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(100px, 1fr));
  gap                   : 10px;
  margin-top            : 8px;
}

.metric-card
{
  background-color : #2c292e;
  border           : 1px solid #322f34;
  border-radius    : 4px 4px 4px 4px;
  padding          : 10px 12px 10px 12px;
  text-align       : center;
}

.metric-card > .metric-value
{
  font-size     : 20px;
  font-weight   : bold;
  color         : #efd5c5;
  display       : block;
  margin-bottom : 2px;
  width         : auto;
}

.metric-card > .metric-label
{
  font-size   : 11px;
  color       : #8f8886;
  font-weight : 400;
  width       : auto;
}

.activity-section
{
  margin-top       : 1em;
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  padding          : 8px 10px 8px 10px;
  border           : 1px solid #3b393e;
}

.activity-timeline
{
  position     : relative;
  padding-left : 20px;
  margin-top   : 8px;
}

.activity-timeline::before
{
  content          : '';
  position         : absolute;
  left             : 6px;
  top              : 0px;
  bottom           : 0px;
  width            : 2px;
  background-color : #3b393e;
}

.activity-item
{
  position       : relative;
  display        : flex;
  gap            : 8px;
  padding-bottom : 10px;
  margin-bottom  : 0px;
}

.activity-item:last-child
{
  padding-bottom : 0px;
}

.activity-icon
{
  position         : absolute;
  left             : -16px;
  width            : 14px;
  height           : 14px;
  border-radius    : 50% 50% 50% 50%;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 8px;
  font-weight      : bold;
  background-color : #2c292e;
  border           : 2px solid #3b393e;
}

.activity-content
{
  flex : 1;
}

.activity-header
{
  display       : flex;
  align-items   : center;
  gap           : 6px;
  margin-bottom : 2px;
}

.activity-stage
{
  font-weight : 600;
  font-size   : 12px;
}

.activity-time
{
  font-size : 11px;
  color     : #8f8886;
}

.activity-message
{
  margin    : 2px 0px 0px 0px;
  font-size : 12px;
  color     : #efd5c5;
}

.activity-metadata
{
  margin-top : 4px;
}

.activity-metadata > summary
{
  font-size : 11px;
  color     : #8f8886;
  cursor    : pointer;
}

.metadata-json
{
  font-size        : 10px;
  background-color : #322f34;
  padding          : 4px 6px 4px 6px;
  border-radius    : 2px 2px 2px 2px;
  margin-top       : 2px;
  max-height       : 150px;
  overflow         : auto;
}

.stage-claiming > .activity-icon
{
  border-color : #57b0ff;
  color        : #57b0ff;
}

.stage-running > .activity-icon
{
  border-color : #c0b24f;
  color        : #c0b24f;
}

.stage-reviewing > .activity-icon
{
  border-color : #d0b0ff;
  color        : #d0b0ff;
}

.stage-retrying > .activity-icon
{
  border-color : #f3c09a;
  color        : #f3c09a;
}

.stage-completed > .activity-icon
{
  border-color : #51b04f;
  color        : #51b04f;
}

.stage-failed > .activity-icon
{
  border-color : #ff6f6f;
  color        : #ff6f6f;
}

.commit-list
{
  display        : flex;
  flex-direction : column;
  gap            : 4px;
  margin-top     : 8px;
}

.commit-item
{
  padding          : 6px 8px 6px 8px;
  background-color : #2c292e;
  border-radius    : 0px 0px 0px 0px;
  border           : 1px solid #322f34;
}

.commit-header
{
  display       : flex;
  align-items   : center;
  gap           : 8px;
  margin-bottom : 2px;
}

.commit-hash
{
  font-family      : "SF Mono","Monaco","monospace", monospace;
  font-size        : 12px;
  color            : #6fb3c0;
  text-decoration  : none;
  background-color : #3b393e;
  padding          : 1px 4px 1px 4px;
  border-radius    : 2px 2px 2px 2px;
}

.commit-hash:hover
{
  text-decoration : underline;
}

.commit-summary
{
  font-size   : 13px;
  color       : #efd5c5;
  font-weight : 500;
}

.commit-meta
{
  display   : flex;
  gap       : 12px;
  font-size : 11px;
  color     : #8f8886;
}

.commit-author
{
  font-weight : 500;
}

.commit-files
{
  color : #6b6568;
}

.markdown-content
{
  width       : 100%;
  line-height : 1.6em;
  font-size   : 14px;
  color       : #efd5c5;
}

.md-h1
{
  font-size      : 18px;
  font-weight    : bold;
  margin         : 1em 0px 0.5em 0px;
  padding-bottom : 0.3em;
  border-bottom  : 1px solid #322f34;
}

.md-h2
{
  font-size   : 16px;
  font-weight : 600;
  margin      : 0.8em 0px 0.4em 0px;
}

.md-h3
{
  font-size   : 14px;
  font-weight : 600;
  margin      : 0.6em 0px 0.3em 0px;
}

.md-para
{
  margin : 0.5em 0px 0.5em 0px;
}

.md-code
{
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size        : 12px;
  background-color : #2c292e;
  color            : #efd5c5;
  padding          : 10px 12px 10px 12px;
  border-radius    : 4px 4px 4px 4px;
  border           : 1px solid #3b393e;
  overflow         : auto;
  white-space      : pre-wrap;
  margin           : 0.5em 0px 0.5em 0px;
}

.md-list
{
  margin       : 0.5em 0px 0.5em 0px;
  padding-left : 24px;
}

.md-list li
{
  margin : 4px 0px 4px 0px;
}

.md-inline-code
{
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size        : 0.9em;
  background-color : #322f34;
  padding          : 1px 4px 1px 4px;
  border-radius    : 2px 2px 2px 2px;
}

.retry-banner
{
  border-radius : 4px 4px 4px 4px;
  padding       : 12px 16px 12px 16px;
  margin        : 0px 0px 16px 0px;
}

.retry-banner-warning
{
  background : rgba(250,204,21,0.15);
  border     : 1px solid #c0b24f;
}

.retry-banner-critical
{
  background : rgba(248,113,113,0.1);
  border     : 1px solid #ff6f6f;
}

.retry-banner-header
{
  display       : flex;
  align-items   : center;
  gap           : 8px;
  margin-bottom : 8px;
}

.retry-icon
{
  font-size   : 18px;
  font-weight : bold;
}

.retry-attempt
{
  font-size   : 14px;
  font-weight : 600;
  color       : #efd5c5;
}

.retry-warning-badge
{
  background-color : #ff6f6f;
  color            : #ffffff;
  font-size        : 11px;
  font-weight      : 600;
  padding          : 2px 8px 2px 8px;
  border-radius    : 2px 2px 2px 2px;
  margin-left      : auto;
}

.retry-banner-details
{
  font-size : 13px;
  color     : #efd5c5;
}

.retry-detail-row
{
  display     : flex;
  align-items : flex-start;
  gap         : 8px;
  margin      : 4px 0px 4px 0px;
}

.retry-label
{
  font-weight : 500;
  min-width   : 110px;
  flex-shrink : 0;
}

.retry-value
{
  color : #8f8886;
}

.retry-commit
{
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size        : 0.9em;
  background-color : #322f34;
  padding          : 1px 4px 1px 4px;
  border-radius    : 2px 2px 2px 2px;
}

.retry-conflict-list
{
  margin  : 0px 0px 0px 0px;
  padding : 0px 0px 0px 16px;
}

.retry-conflict-list li
{
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  margin      : 2px 0px 2px 0px;
}

.retry-warning-message
{
  margin-top    : 12px;
  padding       : 10px 12px 10px 12px;
  background    : rgba(248,113,113,0.2);
  border-radius : 2px 2px 2px 2px;
  font-size     : 12px;
  color         : #ff6f6f;
  font-weight   : 500;
}

.retry-hint
{
  margin-top : 8px;
  font-size  : 12px;
  color      : #8f8886;
  font-style : italic;
}

.comments-section
{
  margin-top : 12px;
}

.comment-card
{
  background-color : #2c292e;
  border           : 1px solid #322f34;
  border-radius    : 0px 0px 0px 0px;
  padding          : 10px 12px 10px 12px;
  margin-bottom    : 10px;
}

.comment-text
{
  margin      : 0px 0px 6px 0px;
  font-size   : 13px;
  color       : #efd5c5;
  white-space : pre-wrap;
}

.comment-meta
{
  display     : flex;
  align-items : center;
  gap         : 8px;
}

.comment-author
{
  display        : inline-block;
  padding        : 2px 6px 2px 6px;
  border-radius  : 2px 2px 2px 2px;
  font-size      : 10px;
  font-weight    : 600;
  text-transform : uppercase;
  white-space    : nowrap;
}

.author-human
{
  background : rgba(96,165,250,0.15);
  color      : #57b0ff;
}

.author-junior
{
  background : rgba(74,222,128,0.15);
  color      : #51b04f;
}

.comment-time
{
  font-size : 11px;
  color     : #6b6568;
}

.comment-form
{
  margin-top     : 12px;
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

.comment-textarea
{
  width         : 100%;
  padding       : 8px 10px 8px 10px;
  font-size     : 13px;
  border        : 1px solid #3b393e;
  border-radius : 4px 4px 4px 4px;
  resize        : vertical;
  min-height    : 60px;
}

.comment-textarea:focus
{
  outline      : none;
  border-color : #5a9aa6;
}

.task-meta
{
  margin-bottom : 12px;
}

.task-meta-primary
{
  display       : flex;
  align-items   : center;
  flex-wrap     : wrap;
  gap           : 6px;
  font-size     : 14px;
  margin-bottom : 4px;
}

.task-meta-secondary
{
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : 6px;
  font-size   : 12px;
  color       : #8f8886;
}

.task-meta-id
{
  font-family      : "SF Mono","Monaco","monospace", monospace;
  font-size        : 13px;
  background-color : #322f34;
  padding          : 1px 4px 1px 4px;
  border-radius    : 2px 2px 2px 2px;
}

.task-meta-label
{
  color : #8f8886;
}

.meta-sep
{
  color       : #efd5c5;
  user-select : none;
}

.time-filter
{
  display       : flex;
  gap           : 6px;
  margin-bottom : 12px;
  flex-wrap     : wrap;
}

.time-filter-btn
{
  display            : inline-block;
  padding            : 4px 12px 4px 12px;
  font-size          : 12px;
  font-weight        : 500;
  text-decoration    : none;
  border-radius      : 12px 12px 12px 12px;
  border             : 1px solid #3b393e;
  background-color   : #2c292e;
  color              : #efd5c5;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
  cursor             : pointer;
}

.time-filter-btn:hover
{
  border-color     : #6b6568;
  background-color : #322f34;
  text-decoration  : none;
}

.time-filter-btn.active
{
  background-color : #5a9aa6;
  border-color     : #5a9aa6;
  color            : #ffffff;
}

.time-filter-btn.active:hover
{
  background-color : #6fb3c0;
  border-color     : #6fb3c0;
}

.page-header-row
{
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 12px;
  margin-bottom   : 8px;
}

.page-header-row > h1
{
  margin : 0px 0px 0px 0px;
}

.sort-dropdown
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  font-size   : 13px;
}

.sort-label
{
  color       : #8f8886;
  font-weight : 500;
}

.sort-dropdown-wrapper
{
  position : relative;
}

.sort-dropdown-btn
{
  padding            : 4px 10px 4px 10px;
  font-size          : 13px;
  font-weight        : 500;
  border             : 1px solid #3b393e;
  border-radius      : 4px 4px 4px 4px;
  background-color   : #2c292e;
  color              : #efd5c5;
  cursor             : pointer;
  -webkit-transition : all 150.0ms ease 0.0s;
  -moz-transition    : all 150.0ms ease 0.0s;
  -ms-transition     : all 150.0ms ease 0.0s;
  -o-transition      : all 150.0ms ease 0.0s;
  transition         : all 150.0ms ease 0.0s;
  white-space        : nowrap;
}

.sort-dropdown-btn:hover
{
  border-color     : #6b6568;
  background-color : #322f34;
}

.sort-dropdown-content
{
  min-width : 160px;
  right     : 0px;
  left      : auto;
}

.sort-dropdown-item
{
  padding   : 8px 12px 8px 12px;
  font-size : 13px;
}

.sort-dropdown-item.active
{
  background  : rgba(96,165,250,0.1);
  font-weight : 600;
}

.event-header
{
  display       : flex;
  align-items   : center;
  gap           : 8px;
  margin-bottom : 4px;
}

.event-icon
{
  font-size  : 14px;
  width      : 20px;
  text-align : center;
}

.event-label
{
  font-weight : 500;
  color       : #efd5c5;
}

.event-assistant
{
  padding : 0px 0px 0px 0px;
}

.event-bubble
{
  background-color : #322f34;
  padding          : 8px 12px 8px 12px;
  border-radius    : 8px 8px 8px 8px;
  white-space      : pre-wrap;
  line-height      : 1.5em;
}

.event-truncated
{
  color      : #8f8886;
  font-style : italic;
}

.event-tool-call
{
  border-left  : 3px solid #57b0ff;
  padding-left : 8px;
}

.event-tool-call > summary
{
  cursor          : pointer;
  list-style-type : none;
  display         : flex;
  align-items     : center;
  gap             : 8px;
}

.event-tool-call > summary::before
{
  content            : "▶";
  font-size          : 10px;
  color              : #8f8886;
  -webkit-transition : transform 150.0ms ease 0.0s;
  -moz-transition    : transform 150.0ms ease 0.0s;
  -ms-transition     : transform 150.0ms ease 0.0s;
  -o-transition      : transform 150.0ms ease 0.0s;
  transition         : transform 150.0ms ease 0.0s;
}

.event-tool-call[open] > summary::before
{
  transform : rotate(90deg);
}

.tool-name
{
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  color       : #57b0ff;
}

.tool-summary
{
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  color       : #8f8886;
  margin-left : 8px;
}

.tool-args
{
  margin-top   : 4px;
  padding-left : 20px;
}

.tool-output-pre
{
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size        : 11px;
  background-color : #232025;
  color            : #efd5c5;
  padding          : 8px 10px 8px 10px;
  border-radius    : 4px 4px 4px 4px;
  overflow-x       : auto;
  white-space      : pre-wrap;
  max-height       : 300px;
  margin           : 0px 0px 0px 0px;
}

.event-tool-result
{
  border-left  : 3px solid #51b04f;
  padding-left : 8px;
}

.result-header
{
  font-size : 12px;
}

.line-count
{
  font-size        : 11px;
  color            : #8f8886;
  background-color : #322f34;
  padding          : 1px 6px 1px 6px;
  border-radius    : 10px 10px 10px 10px;
}

.result-collapsible > summary
{
  cursor        : pointer;
  font-size     : 12px;
  color         : #6fb3c0;
  margin-bottom : 4px;
}

.result-collapsible > summary:hover
{
  text-decoration : underline;
}

.tool-output
{
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size        : 11px;
  background-color : #232025;
  color            : #efd5c5;
  padding          : 8px 10px 8px 10px;
  border-radius    : 4px 4px 4px 4px;
  overflow-x       : auto;
  white-space      : pre-wrap;
  max-height       : 300px;
  margin           : 0px 0px 0px 0px;
}

.event-cost
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  font-size   : 11px;
  color       : #8f8886;
  padding     : 4px 0px 4px 0px;
}

.cost-text
{
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
}

.event-error
{
  border-left   : 3px solid #ff6f6f;
  padding-left  : 8px;
  background    : rgba(248,113,113,0.1);
  padding       : 8px 8px 8px 12px;
  border-radius : 4px 4px 4px 4px;
}

.event-error > .event-label
{
  color : #ff6f6f;
}

.error-message
{
  color       : #ff6f6f;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  white-space : pre-wrap;
}

.event-complete
{
  display     : flex;
  align-items : center;
  gap         : 8px;
  color       : #51b04f;
  font-weight : 500;
  padding     : 8px 0px 8px 0px;
}

.output-collapsible > summary
{
  cursor        : pointer;
  font-size     : 12px;
  color         : #6fb3c0;
  margin-bottom : 4px;
}

.output-collapsible > summary:hover
{
  text-decoration : underline;
}

.unified-timeline-section
{
  margin-top  : 1.5em;
  padding-top : 1em;
  border-top  : 1px solid #322f34;
}

.timeline-live-toggle
{
  font-size      : 10px;
  font-weight    : bold;
  color          : #51b04f;
  background     : rgba(74,222,128,0.15);
  padding        : 2px 6px 2px 6px;
  border-radius  : 10px 10px 10px 10px;
  margin-left    : 8px;
  text-transform : uppercase;
  border         : 1px solid #51b04f;
  cursor         : pointer;
  transition     : all 0.3s ease;
  animation      : pulse 2s infinite;
}

.timeline-live-toggle:hover
{
  box-shadow : 0 0 8px rgba(16,185,129,0.4);
}

.timeline-live-toggle.timeline-live-paused
{
  color            : #8f8886;
  background-color : #322f34;
  border           : 1px solid #3b393e;
  animation        : none;
}

.timeline-autoscroll-toggle
{
  font-size     : 10px;
  font-weight   : bold;
  color         : #57b0ff;
  background    : rgba(96,165,250,0.15);
  padding       : 2px 6px 2px 6px;
  border-radius : 10px 10px 10px 10px;
  margin-left   : 4px;
  border        : 1px solid #57b0ff;
  cursor        : pointer;
  transition    : all 0.2s ease;
}

.timeline-autoscroll-toggle:hover
{
  box-shadow : 0 0 6px rgba(59,130,246,0.3);
}

.timeline-autoscroll-toggle.timeline-autoscroll-disabled
{
  color            : #8f8886;
  background-color : #322f34;
  border           : 1px solid #3b393e;
}

.timeline-live
{
  font-size      : 10px;
  font-weight    : bold;
  color          : #51b04f;
  background     : rgba(74,222,128,0.15);
  padding        : 2px 6px 2px 6px;
  border-radius  : 10px 10px 10px 10px;
  margin-left    : 8px;
  text-transform : uppercase;
  animation      : pulse 2s infinite;
}

.timeline-events
{
  max-height     : 600px;
  overflow-y     : auto;
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  padding        : 12px 0px 12px 0px;
}

.timeline-event
{
  font-size   : 13px;
  line-height : 1.4em;
}

.actor-label
{
  font-size     : 11px;
  font-weight   : 500;
  padding       : 1px 4px 1px 4px;
  border-radius : 3px 3px 3px 3px;
  margin-left   : 4px;
  margin-right  : 4px;
}

.actor-human
{
  color      : #d0b0ff;
  background : rgba(167,139,250,0.15);
}

.actor-junior
{
  color      : #57b0ff;
  background : rgba(96,165,250,0.1);
}

.actor-system
{
  color            : #8f8886;
  background-color : #322f34;
}

.timeline-comment
{
  padding-left : 4px;
}

.timeline-comment > .comment-bubble
{
  background-color : #322f34;
  color            : #efd5c5;
  padding          : 10px 14px 10px 14px;
  border-radius    : 8px 8px 8px 8px;
  white-space      : pre-wrap;
  margin-top       : 6px;
}

.timeline-status-change
{
  display       : flex;
  align-items   : center;
  gap           : 6px;
  flex-wrap     : wrap;
  padding       : 6px 8px 6px 8px;
  background    : rgba(74,222,128,0.1);
  border-radius : 6px 6px 6px 6px;
  border-left   : 3px solid #51b04f;
}

.status-change-text
{
  font-weight : 500;
  color       : #51b04f;
}

.timeline-activity
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  flex-wrap   : wrap;
  padding     : 4px 0px 4px 0px;
  color       : #8f8886;
}

.activity-detail
{
  font-size   : 11px;
  color       : #6b6568;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
}

.timeline-error
{
  border-left   : 3px solid #ff6f6f;
  background    : rgba(248,113,113,0.1);
  padding       : 8px 12px 8px 12px;
  border-radius : 4px 4px 4px 4px;
}

.timeline-error > .error-message
{
  margin-top  : 6px;
  color       : #ff6f6f;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  white-space : pre-wrap;
}

.timeline-thought
{
  padding-left : 4px;
}

.timeline-thought > .thought-bubble
{
  background    : rgba(250,204,21,0.15);
  color         : #c0b24f;
  padding       : 8px 12px 8px 12px;
  border-radius : 8px 8px 8px 8px;
  white-space   : pre-wrap;
  margin-top    : 6px;
  font-size     : 12px;
  line-height   : 1.5em;
}

.timeline-tool-call
{
  border-left  : 3px solid #57b0ff;
  padding-left : 8px;
}

.timeline-tool-call > summary
{
  cursor          : pointer;
  list-style-type : none;
  display         : flex;
  align-items     : center;
  gap             : 6px;
}

.timeline-tool-call > summary::before
{
  content            : "▶";
  font-size          : 10px;
  color              : #8f8886;
  -webkit-transition : transform 150.0ms ease 0.0s;
  -moz-transition    : transform 150.0ms ease 0.0s;
  -ms-transition     : transform 150.0ms ease 0.0s;
  -o-transition      : transform 150.0ms ease 0.0s;
  transition         : transform 150.0ms ease 0.0s;
}

.timeline-tool-call[open] > summary::before
{
  transform : rotate(90deg);
}

.timeline-tool-result
{
  border-left  : 3px solid #51b04f;
  padding-left : 8px;
}

.timeline-tool-result > summary
{
  cursor          : pointer;
  list-style-type : none;
  display         : flex;
  align-items     : center;
  gap             : 6px;
}

.timeline-cost
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  font-size   : 11px;
  color       : #8f8886;
  padding     : 2px 0px 2px 0px;
}

.timeline-checkpoint
{
  border-left   : 3px solid #d0b0ff;
  background    : rgba(167,139,250,0.1);
  padding       : 8px 12px 8px 12px;
  border-radius : 4px 4px 4px 4px;
}

.timeline-checkpoint > .checkpoint-content
{
  margin-top  : 6px;
  font-size   : 12px;
  white-space : pre-wrap;
}

.timeline-guardrail
{
  border-left   : 3px solid #c0b24f;
  background    : rgba(250,204,21,0.1);
  padding       : 8px 12px 8px 12px;
  border-radius : 4px 4px 4px 4px;
}

.timeline-guardrail > .guardrail-content
{
  margin-top : 6px;
  font-size  : 12px;
  color      : #c0b24f;
}

.timeline-generic
{
  padding : 4px 0px 4px 0px;
  color   : #8f8886;
}

.formatted-json
{
  margin           : 0px 0px 0px 0px;
  padding          : 8px 8px 8px 8px;
  background-color : #2c292e;
  border-radius    : 4px 4px 4px 4px;
  overflow-x       : auto;
  font-size        : 12px;
  font-family      : "SF Mono","Monaco","Consolas","monospace", monospace;
  white-space      : pre-wrap;
  overflow-wrap    : break-word;
}

.tool-compact
{
  display     : flex;
  align-items : center;
  gap         : 6px;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  padding     : 2px 0px 2px 0px;
}

.tool-check
{
  color       : #51b04f;
  font-weight : bold;
}

.tool-label
{
  color       : #8f8886;
  font-weight : 500;
}

.tool-path
{
  color : #57b0ff;
}

.tool-pattern
{
  color         : #d0b0ff;
  background    : rgba(167,139,250,0.1);
  padding       : 1px 4px 1px 4px;
  border-radius : 2px 2px 2px 2px;
}

.tool-path-suffix
{
  color     : #8f8886;
  font-size : 11px;
}

.tool-bash
{
  display     : flex;
  align-items : flex-start;
  gap         : 6px;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
  font-size   : 12px;
  padding     : 2px 0px 2px 0px;
}

.tool-bash-prompt
{
  color       : #c0b24f;
  font-weight : bold;
  font-size   : 14px;
}

.tool-bash-cmd
{
  color            : #efd5c5;
  background-color : #322f34;
  padding          : 2px 6px 2px 6px;
  border-radius    : 3px 3px 3px 3px;
  word-break       : break-all;
}

.tool-generic
{
  font-size   : 12px;
  font-family : "SF Mono","Monaco","Consolas","monospace", monospace;
}

.tool-generic > summary
{
  cursor      : pointer;
  display     : flex;
  align-items : center;
  gap         : 6px;
}

.tool-args-pre
{
  margin           : 4px 0px 0px 16px;
  padding          : 6px 8px 6px 8px;
  background-color : #2c292e;
  border-radius    : 3px 3px 3px 3px;
  font-size        : 11px;
  white-space      : pre-wrap;
  max-height       : 200px;
  overflow-y       : auto;
}

.tool-result-output
{
  margin-left : 16px;
  margin-top  : 2px;
}

@media screen and (max-width: 600px)
{

body
{
  font-size : 15px;
}

.container
{
  padding : 8px 10px 8px 10px;
}

.subnav
{
  padding   : 4px 8px 4px 8px;
  flex-wrap : wrap;
}

.subnav-link
{
  padding   : 6px 8px 6px 8px;
  font-size : 13px;
}

.nav-content
{
  flex-direction : column;
  align-items    : flex-start;
}

.stats-grid
{
  grid-template-columns : repeat(2, 1fr);
}

.detail-row
{
  flex-direction : column;
  gap            : 2px;
}

.detail-label
{
  width : auto;
}

.filter-row
{
  flex-direction : column;
  align-items    : stretch;
  gap            : 10px;
}

.filter-group
{
  width          : 100%;
  flex-direction : column;
  align-items    : flex-start;
  gap            : 4px;
}

.filter-select,
.filter-input
{
  min-width : 0px;
  width     : 100%;
}

.review-actions
{
  flex-direction : column;
}

.reject-form
{
  width          : 100%;
  flex-direction : column;
}

.reject-notes
{
  width : 100%;
}

.actions
{
  flex-direction : column;
}

.action-btn
{
  width : 100%;
}

.list-group-item
{
  align-items : flex-start;
  padding     : 10px 10px 10px 10px;
  flex-wrap   : wrap;
}

.list-group-item
{
  flex-direction : column;
  align-items    : flex-start;
  gap            : 4px;
}

.list-group-item-content
{
  width          : 100%;
  flex-direction : column;
  align-items    : flex-start;
  gap            : 2px;
}

.list-group-item-title
{
  white-space   : normal;
  text-overflow : clip;
  overflow      : visible;
  width         : 100%;
}

.list-group-item-meta
{
  width           : 100%;
  justify-content : flex-start;
  gap             : 8px;
}

}

/* Generated with Clay, http://fvisser.nl/clay *//* ── Light theme: custom properties ─────────────────────── */
:root {
  --c-bg: #232025;
  --c-bg-raised: #2c292e;
  --c-bg-hover: #322f34;
  --c-bg-active: #3b393e;
  --c-border: #3b393e;
  --c-border-subtle: #322f34;
  --c-fg: #efd5c5;
  --c-fg-muted: #8f8886;
  --c-fg-faint: #6b6568;
  --c-accent: #6fb3c0;
  --c-accent-dim: #5a9aa6;
  --c-link: #57b0ff;
  --c-green: #51b04f;
  --c-yellow: #c0b24f;
  --c-orange: #f3c09a;
  --c-red: #ff6f6f;
  --c-purple: #d0b0ff;
  --c-blue: #57b0ff;
}
@media (prefers-color-scheme: light) {
  :root {
    --c-bg: #faf8f6;
    --c-bg-raised: #ffffff;
    --c-bg-hover: #f0eeec;
    --c-bg-active: #e6e3e0;
    --c-border: #d4d0cc;
    --c-border-subtle: #e8e5e2;
    --c-fg: #232025;
    --c-fg-muted: #6b6568;
    --c-fg-faint: #9a9497;
    --c-accent: #4a8f9a;
    --c-accent-dim: #3d7a84;
    --c-link: #2563eb;
    --c-green: #16a34a;
    --c-yellow: #a38a00;
    --c-orange: #c2601a;
    --c-red: #dc2626;
    --c-purple: #7c3aed;
    --c-blue: #2563eb;
  }
  ::selection { background: rgba(37,99,235,0.2); }
  ::-webkit-scrollbar-thumb { background: #d4d0cc; }
}

/* ── Light theme: var() overrides for shared design system ─ */
body { background-color: var(--c-bg); color: var(--c-fg); }
a, a:visited { color: var(--c-link); }
h2 { color: var(--c-fg); }
code { background-color: var(--c-bg-hover); border-color: var(--c-border); }
pre { background-color: var(--c-bg); border-color: var(--c-border); }
.reading > blockquote { border-left-color: var(--c-accent-dim); color: var(--c-fg-muted); }

/* Navigation */
.on-nav { background-color: var(--c-bg); border-bottom-color: var(--c-border); }
.on-nav-brand { color: var(--c-accent); }
.on-nav-link { color: var(--c-fg-muted); }
.on-nav-link:hover { background-color: var(--c-bg-hover); color: var(--c-fg); }
.on-active { color: var(--c-accent); background-color: var(--c-bg-hover); }

/* Cards */
.card { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.card-link:hover > .card { border-color: var(--c-accent-dim); }

/* Badges */
.badge-open { color: var(--c-yellow); }
.badge-inprogress { color: var(--c-blue); }
.badge-review { color: var(--c-purple); }
.badge-approved { color: var(--c-accent); }
.badge-done { color: var(--c-green); }
.badge-needshelp { color: var(--c-orange); }
.badge-p0 { color: var(--c-red); }
.badge-p1 { color: var(--c-orange); }
.badge-p2 { color: var(--c-blue); }
.badge-p3 { background-color: var(--c-bg-hover); color: var(--c-fg-muted); }
.badge-p4 { background-color: var(--c-bg-hover); color: var(--c-fg-faint); }

/* Buttons */
.btn { background-color: var(--c-bg-raised); border-color: var(--c-border); color: var(--c-fg); }
.btn:hover { background-color: var(--c-bg-hover); border-color: var(--c-fg-faint); }
.btn:active { background-color: var(--c-bg-active); }
.btn-primary { background-color: var(--c-accent-dim); border-color: var(--c-accent-dim); }
.btn-primary:hover { background-color: var(--c-accent); border-color: var(--c-accent); }
.btn-ghost:hover { background-color: var(--c-bg-hover); }

/* Forms */
input, select, textarea { color: var(--c-fg); background-color: var(--c-bg); border-color: var(--c-border); }
input:focus, select:focus, textarea:focus { border-color: var(--c-accent-dim); }

/* Tables */
th, td { border-bottom-color: var(--c-border); }
th { color: var(--c-fg-muted); }
tr:hover { background-color: var(--c-bg-hover); }

/* Utilities */
.muted { color: var(--c-fg-muted); }
.faint { color: var(--c-fg-faint); }
.accent { color: var(--c-accent); }
.empty-state { color: var(--c-fg-faint); }
.divider { border-top-color: var(--c-border); }
/* ── Light theme: task-specific var() overrides ────────── */

/* Task navigation */
.navbar { background-color: var(--c-bg); border-bottom-color: var(--c-border); }
.navbar-brand { color: var(--c-accent); }
.hamburger-line { background-color: var(--c-fg-muted); }
.navbar-link { color: var(--c-fg-muted); }
.navbar-link:hover { background-color: var(--c-bg-hover); color: var(--c-fg); }
.navbar-dropdown-btn { color: var(--c-fg-muted); }
.navbar-dropdown-btn:hover { background-color: var(--c-bg-hover); color: var(--c-fg); }
.navbar-dropdown-content { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.navbar-dropdown-item { color: var(--c-fg-muted); }
.navbar-dropdown-item:hover { background-color: var(--c-bg-hover); color: var(--c-fg); }
header { background-color: var(--c-bg); border-bottom-color: var(--c-border); }
.nav-brand { color: var(--c-accent); }

/* Breadcrumbs */
.breadcrumb-sep { color: var(--c-fg-faint); }
.breadcrumb-current { color: var(--c-fg-muted); }
.breadcrumb-list a { color: var(--c-accent); }

/* Task cards & panels */
.task-card, .stat-card, .task-detail, .task-summary,
.filter-form, .status-form, .diff-section, .review-actions
{ background-color: var(--c-bg-raised); border-color: var(--c-border); }
.task-card:hover { border-color: var(--c-accent-dim); }
.task-card-link, .task-card-link:visited { color: var(--c-fg); }
.task-id { color: var(--c-accent); }
.priority { color: var(--c-fg-muted); }
.blocking-impact { color: var(--c-fg-muted); background-color: var(--c-border); }
.task-title { color: var(--c-fg); }
.empty-msg, .info-msg { color: var(--c-fg-muted); }
.kb-preview { color: var(--c-fg-muted); }
.ready-link { color: var(--c-accent); }
.count-badge { background-color: var(--c-accent-dim); }
.description { background-color: var(--c-bg-raised); color: var(--c-fg); }

/* Stat cards */
.stat-label { color: var(--c-fg-muted); }
.stat-card.badge-open { border-left-color: var(--c-yellow); }
.stat-card.badge-open > .stat-count { color: var(--c-yellow); }
.stat-card.badge-inprogress { border-left-color: var(--c-blue); }
.stat-card.badge-inprogress > .stat-count { color: var(--c-blue); }
.stat-card.badge-review { border-left-color: var(--c-purple); }
.stat-card.badge-review > .stat-count { color: var(--c-purple); }
.stat-card.badge-approved { border-left-color: var(--c-accent); }
.stat-card.badge-approved > .stat-count { color: var(--c-accent); }
.stat-card.badge-done { border-left-color: var(--c-green); }
.stat-card.badge-done > .stat-count { color: var(--c-green); }
.stat-card.badge-neutral { border-left-color: var(--c-fg-muted); }
.stat-card.badge-neutral > .stat-count { color: var(--c-fg-muted); }

/* List groups */
.list-group { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.list-group-item { border-bottom-color: var(--c-border-subtle); color: var(--c-fg); }
.list-group-item:visited { color: var(--c-fg); }
.list-group-item:hover { background-color: var(--c-bg-hover); }
.list-group-item-id { color: var(--c-accent); }
.list-group-item-title { color: var(--c-fg); }

/* Status/priority/complexity dropdowns */
.status-dropdown-menu, .priority-dropdown-menu, .complexity-dropdown-menu
{ background-color: var(--c-bg-raised); border-color: var(--c-border); }

/* Complexity badges */
.badge-complexity { color: var(--c-accent-dim); }
.badge-complexity-1 { color: var(--c-green); }
.badge-complexity-2 { color: var(--c-blue); }
.badge-complexity-3 { color: var(--c-yellow); }
.badge-complexity-4 { color: var(--c-orange); }
.badge-complexity-5 { color: var(--c-red); }
.badge-complexity-none { background-color: var(--c-bg-hover); color: var(--c-fg-muted); }

/* Progress bars */
.progress-bar, .multi-progress-bar { background-color: var(--c-border); }
.progress-fill { background-color: var(--c-accent-dim); }
.progress-done, .legend-done { background-color: var(--c-green); }
.progress-inprogress, .legend-inprogress { background-color: var(--c-yellow); }
.progress-open, .legend-open { background-color: var(--c-blue); }
.progress-legend { color: var(--c-fg-muted); }

/* Stats & summary sections */
.stats-section, .summary-section { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.stats-label { color: var(--c-fg); }
.stats-count { color: var(--c-fg); }

/* Task buttons */
.action-btn { background-color: var(--c-bg-raised); border-color: var(--c-border); color: var(--c-fg); }
.action-btn:hover { background-color: var(--c-bg-hover); border-color: var(--c-fg-faint); }
.action-btn-primary, .filter-btn, .submit-btn { background-color: var(--c-accent-dim); border-color: var(--c-accent-dim); }
.accept-btn { color: var(--c-green); }
.reject-btn { color: var(--c-red); }
.review-link-btn { color: var(--c-purple); }
.clear-btn { background-color: var(--c-bg-hover); color: var(--c-fg); border-color: var(--c-border); }
.clear-btn:hover { background-color: var(--c-bg-active); }
.btn-secondary, .load-more-btn { background-color: var(--c-fg-muted); }

/* Task forms */
.filter-select, .filter-input, .status-select { border-color: var(--c-border); background-color: var(--c-bg); color: var(--c-fg); }
.reject-notes { border-color: var(--c-border); }
.description-textarea { border-color: var(--c-border); }
.form-group > label { color: var(--c-fg); }
.form-input, .form-textarea { border-color: var(--c-border); }
.form-input:focus, .form-textarea:focus { border-color: var(--c-accent-dim); }
.fact-create-form { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.edit-link, .cancel-link { color: var(--c-accent); }
button.cancel-link { color: var(--c-red); }
.edit-description > summary { color: var(--c-accent); }
.task-link { color: var(--c-accent); }
.error-msg { color: var(--c-red); border-color: var(--c-red); }
.danger-zone { border-color: var(--c-red); }
.danger-zone > h2 { color: var(--c-red); }
.back-link { border-top-color: var(--c-border-subtle); }
.back-link > a { color: var(--c-fg-muted); }
.back-link > a:hover { color: var(--c-fg); }

/* Execution details */
.execution-section { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.metric-label { color: var(--c-fg-muted); }
.metric-card { background-color: var(--c-bg-raised); border-color: var(--c-border-subtle); }
.metric-card > .metric-value { color: var(--c-fg); }
.metric-card > .metric-label { color: var(--c-fg-muted); }
.amp-link { color: var(--c-accent); }
.amp-thread-btn { background-color: var(--c-purple); }
.retry-count { color: var(--c-orange); }
.attempts-divider { border-top-color: var(--c-border-subtle); }
.attempt-header { color: var(--c-fg); border-bottom-color: var(--c-border-subtle); }

/* Activity timeline */
.activity-section { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.activity-timeline::before { background-color: var(--c-border); }
.activity-icon { background-color: var(--c-bg-raised); border-color: var(--c-border); }
.activity-time { color: var(--c-fg-muted); }
.activity-message { color: var(--c-fg); }
.metadata-json { background-color: var(--c-bg-hover); }
.stage-claiming > .activity-icon { border-color: var(--c-blue); color: var(--c-blue); }
.stage-running > .activity-icon { border-color: var(--c-yellow); color: var(--c-yellow); }
.stage-reviewing > .activity-icon { border-color: var(--c-purple); color: var(--c-purple); }
.stage-retrying > .activity-icon { border-color: var(--c-orange); color: var(--c-orange); }
.stage-completed > .activity-icon { border-color: var(--c-green); color: var(--c-green); }
.stage-failed > .activity-icon { border-color: var(--c-red); color: var(--c-red); }

/* Commits */
.commit-item { background-color: var(--c-bg-raised); border-color: var(--c-border-subtle); }
.commit-hash { color: var(--c-accent); background-color: var(--c-border); }
.commit-summary { color: var(--c-fg); }
.commit-meta { color: var(--c-fg-muted); }
.commit-files { color: var(--c-fg-faint); }

/* Markdown */
.markdown-content { color: var(--c-fg); }
.md-h1 { border-bottom-color: var(--c-border-subtle); }
.md-code { background-color: var(--c-bg-raised); color: var(--c-fg); border-color: var(--c-border); }
.md-inline-code { background-color: var(--c-bg-hover); }

/* Comments */
.comment-card { background-color: var(--c-bg-raised); border-color: var(--c-border-subtle); }
.comment-text { color: var(--c-fg); }
.author-human { color: var(--c-blue); }
.author-junior { color: var(--c-green); }
.comment-time { color: var(--c-fg-faint); }
.comment-textarea { border-color: var(--c-border); }
.comment-textarea:focus { border-color: var(--c-accent-dim); }

/* Retry banners */
.retry-attempt { color: var(--c-fg); }
.retry-value { color: var(--c-fg-muted); }
.retry-hint { color: var(--c-fg-muted); }
.retry-warning-message { color: var(--c-red); }
.retry-commit { background-color: var(--c-bg-hover); }

/* Time filters */
.time-filter-btn { border-color: var(--c-border); background-color: var(--c-bg-raised); color: var(--c-fg); }
.time-filter-btn:hover { border-color: var(--c-fg-faint); background-color: var(--c-bg-hover); }
.time-filter-btn.active { background-color: var(--c-accent-dim); border-color: var(--c-accent-dim); }
.time-filter-btn.active:hover { background-color: var(--c-accent); border-color: var(--c-accent); }

/* Sort dropdown */
.sort-label { color: var(--c-fg-muted); }
.sort-dropdown-btn { border-color: var(--c-border); background-color: var(--c-bg-raised); color: var(--c-fg); }
.sort-dropdown-btn:hover { border-color: var(--c-fg-faint); background-color: var(--c-bg-hover); }

/* Task meta */
.task-meta-id { background-color: var(--c-bg-hover); }
.task-meta-label { color: var(--c-fg-muted); }
.meta-sep { color: var(--c-fg); }

/* Detail rows */
.detail-label { color: var(--c-fg-muted); }
.detail-section { border-top-color: var(--c-border-subtle); }
.dep-type, .child-status { color: var(--c-fg-muted); }
.child-title { color: var(--c-fg); }
.priority-desc { color: var(--c-fg-muted); }

/* Timeline events */
.event-bubble { background-color: var(--c-bg-hover); }
.event-truncated { color: var(--c-fg-muted); }
.event-tool-call { border-left-color: var(--c-blue); }
.tool-name { color: var(--c-blue); }
.tool-summary { color: var(--c-fg-muted); }
.tool-output-pre, .tool-output { background-color: var(--c-bg); color: var(--c-fg); }
.event-tool-result { border-left-color: var(--c-green); }
.event-cost, .timeline-cost { color: var(--c-fg-muted); }
.line-count { color: var(--c-fg-muted); background-color: var(--c-bg-hover); }
.result-collapsible > summary, .output-collapsible > summary { color: var(--c-accent); }
.event-error { border-left-color: var(--c-red); }
.event-error > .event-label { color: var(--c-red); }
.error-message { color: var(--c-red); }
.event-complete { color: var(--c-green); }

/* Unified timeline */
.unified-timeline-section { border-top-color: var(--c-border-subtle); }
.timeline-live-toggle { color: var(--c-green); border-color: var(--c-green); }
.timeline-live-toggle.timeline-live-paused { color: var(--c-fg-muted); background-color: var(--c-bg-hover); border-color: var(--c-border); }
.timeline-autoscroll-toggle { color: var(--c-blue); border-color: var(--c-blue); }
.timeline-autoscroll-toggle.timeline-autoscroll-disabled { color: var(--c-fg-muted); background-color: var(--c-bg-hover); border-color: var(--c-border); }
.timeline-live { color: var(--c-green); }
.actor-human { color: var(--c-purple); }
.actor-junior { color: var(--c-blue); }
.actor-system { color: var(--c-fg-muted); background-color: var(--c-bg-hover); }
.timeline-comment > .comment-bubble { background-color: var(--c-bg-hover); color: var(--c-fg); }
.status-change-text { color: var(--c-green); }
.timeline-activity { color: var(--c-fg-muted); }
.activity-detail { color: var(--c-fg-faint); }
.timeline-error > .error-message { color: var(--c-red); }
.timeline-thought > .thought-bubble { color: var(--c-yellow); }
.timeline-tool-call { border-left-color: var(--c-blue); }
.timeline-tool-result { border-left-color: var(--c-green); }
.timeline-checkpoint { border-left-color: var(--c-purple); }
.timeline-guardrail { border-left-color: var(--c-yellow); }
.timeline-guardrail > .guardrail-content { color: var(--c-yellow); }
.timeline-generic { color: var(--c-fg-muted); }
.formatted-json { background-color: var(--c-bg-raised); }

/* Tool compact styles */
.tool-check { color: var(--c-green); }
.tool-label { color: var(--c-fg-muted); }
.tool-path { color: var(--c-blue); }
.tool-pattern { color: var(--c-purple); }
.tool-path-suffix { color: var(--c-fg-muted); }
.tool-bash-prompt { color: var(--c-yellow); }
.tool-bash-cmd { color: var(--c-fg); background-color: var(--c-bg-hover); }
.tool-args-pre { background-color: var(--c-bg-raised); }