.board-page
{
  max-width: 75em;
  margin: 0 auto;
}

.board
{
  display: flex;
  gap: calc( var( --font-size ) * 1.5 );
  align-items: flex-start;
}

.lane
{
  flex: 1;
  min-width: 0;
}

.lane-header
{
  font-size: calc( var( --font-size ) * 1.1 );
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var( --accent );
  margin-bottom: calc( var( --font-size ) * 1 );
  padding-bottom: calc( var( --font-size ) * 0.5 );
  border-bottom: 1px solid var( --border );
}

task-item
{
  display: block;
  background: var( --surface );
  border: 1px solid var( --item-color, var( --border ) );
  border-radius: 8px;
  margin-bottom: calc( var( --font-size ) * 0.75 );
  overflow: hidden;
}

task-title
{
  display: block;
  padding: calc( var( --font-size ) * 0.5 ) calc( var( --font-size ) * 0.85 );
  font-size: calc( var( --font-size ) * 0.9 );
  font-weight: 600;
  color: var( --item-color, var( --text ) );
  cursor: pointer;
  line-height: 1.5;
}

task-title::before
{
  content: '▾ ';
  font-size: 0.75em;
  opacity: 0.6;
}

task-item.hide-content task-title::before
{
  content: '▸ ';
}

task-content
{
  display: block;
  padding: calc( var( --font-size ) * 0.4 ) calc( var( --font-size ) * 0.85 ) calc( var( --font-size ) * 0.65 );
  font-size: calc( var( --font-size ) * 0.85 );
  color: var( --muted );
  border-top: 1px solid var( --border );
  line-height: 1.6;
}

task-item.hide-content task-content
{
  display: none;
}

task-item.red    { --item-color: #c96b6b; }
task-item.green  { --item-color: #57a870; }
task-item.blue   { --item-color: #7c8cff; }
task-item.yellow { --item-color: #c4a040; }
task-item.purple { --item-color: #9060d0; }
task-item.orange { --item-color: #c47840; }